javascript - text-transform: lowercase på ipad(Safari) - Udvikleren.dk

Tags: javascript ipad

Bruger #16723 @ 19.04.16 15:37

Har før fået god hjælp her på siden ;-)
Testside : http://goegl-og-trylleri-med-roeldal.dk/test_20.html
På Ipad(safari) er shift key automatisk aktiveret, fx. i input id="test01" ( testside ) Så alle indtastninger starter med stort bogstav.
Hvis jeg bruger "text-transform: lowercase;" på input id="test01" Bliver indtastninger også små bogstaver, MEN så vil javascript ikke godkende det ? id="test01" skal være = "gul"

Det virker selvfølgelig på computer, der er shift key ikke automatisk aktiveret !

I forstår min problematik

HTML kode

 <div id="msg01"> </div>
 Hvad farve er solen<input id="test01" type="text" maxlength="5" onblur="myFunction01()" style="width: 65px; text-transform: lowercase;"><br>
 <input type="text" id="test02" onblur="myFunction02()">
 <div id="msg02"></div>
 <script>
  
      function myFunction01() {
       var mylist01 = document.getElementById("test01");
       
       // var mylist_text01 = test01.options[mylist01.selectedIndex].text;
       var mylist_text01 = test01.value;      
       
       
       var div_msg01 = document.getElementById("msg01");
       var msg01="";
       if(mylist_text01 !=""){         
           if(mylist_text01=="gul"){
              msg01="<font color='#66CC'>Ok</font>";
           }
           else{
              msg01 ="<font color='#CC0000'>forkert</font>";
           }
       }
       else{
         msg01 ="<font color='#CC0000'>intet angivet</font>";
       }
       div_msg01.innerHTML=msg01;        
   }
  
 function myFunction02() {
       var mylist02 = document.getElementById("test02");
       
       // var mylist_text02 = test02.options[mylist02.selectedIndex].text;
       var mylist_text02 = test02.value;      
       
       
       var div_msg02 = document.getElementById("msg02");
       var msg02="";
       if(mylist_text02 !=""){         
           if(mylist_text02=="gul"){
              msg02="<font color='#66CC'>Ok</font>";
           }
           else{
              msg02 ="<font color='#CC0000'>forkert</font>";
           }
       }
       else{
         msg02 ="<font color='#CC0000'>intet angivet</font>";
       }
       div_msg02.innerHTML=msg02;        
   }
  
  </script>

Indlæg senest redigeret d. 19.04.2016 16:04 af Bruger #16723

3 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 19.04.16 16:51

1.223

legede med noget tilsvarende på http://www.eksperten.dk/spm/1010260

mon ikke toLowerCase er løsningen ??
http://www.w3schools.com/jsref/jsref_tolowercase.asp

transform med CSS påvirker kun det viste, men IKKE det der sendes vidre til js eller serverside

prøv at lave
if(mylist_text01=="gul"){

om til
if(mylist_text01.toLowerCase()=="gul"){

så er den ligeglad med hvilke case du skriver med

Bruger #16723 @ 20.04.16 20:00

"transform med CSS påvirker kun det viste, men IKKE det der sendes vidre til js eller serverside"
Så giver det jo også mening :lol:

Tak for hjælpen :-)

Bruger #16075 @ 20.04.16 20:40

1.223

jeg har taget din code og vist den med 2 løsninger
en med ucFirst(str) og en med toLowerCase

læg mærke til
i test 1
var mylist_text01 = ucFirst(test01.value);
og stort G i Gul
if(mylist_text01=="Gul"){

i test 2
var mylist_text02 = test02.value.toLowerCase();

Kode

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="msg01"> </div>
        Hvad farve er solen<input id="test01" type="text" maxlength="5" onblur="myFunction01()"><br>
        <input type="text" id="test02" onblur="myFunction02()">
        <div id="msg02"></div>
        <script>
            function ucFirst(str) {
                return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
            }

            function myFunction01() {
                var mylist01 = document.getElementById("test01");
                var mylist_text01 = ucFirst(test01.value);
                var div_msg01 = document.getElementById("msg01");
                var msg01 = "";
                if (mylist_text01 != "") {
                    if (mylist_text01 == "Gul") {
                        msg01 = "<font color='#66CC'>Ok</font>";
                    } else {
                        msg01 = "<font color='#CC0000'>forkert</font>";
                    }
                } else {
                    msg01 = "<font color='#CC0000'>intet angivet</font>";
                }
                div_msg01.innerHTML = msg01;
            }

            function myFunction02() {
                var mylist02 = document.getElementById("test02");
                var mylist_text02 = test02.value.toLowerCase();
                var div_msg02 = document.getElementById("msg02");
                var msg02 = "";
                if (mylist_text02 != "") {
                    if (mylist_text02 == "gul") {
                        msg02 = "<font color='#66CC'>Ok</font>";
                    } else {
                        msg02 = "<font color='#CC0000'>forkert</font>";
                    }
                } else {
                    msg02 = "<font color='#CC0000'>intet angivet</font>";
                }
                div_msg02.innerHTML = msg02;
            }
        </script>
        <div>TODO write content</div>
    </body>
</html>

i bægge tilfælde er input nu uafhænig af case, og vil virke til ipad med safari

text-transform: lowercase på ipad(Safari)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler