Göra en "shift" knapp

Hej!

Jag har dammat av ett gammalt JavaScript jag fick hjälp med för sisådär snart 7 år sedan, se här: http://www.webforum.nu/showthread.php?t=147154

Koden som jag använder nu för tiden ser ut så här:

  <script language="JavaScript">
    var oField;
    function fn_choose(obj) {
      oField = obj;
    }
    function fn_klistrain(num) {
      if(oField != null) {
          oField.value += num;
      }
    }
    function fn_clear() {
      if(oField != null) {
          oField.value = '';
      }
    }
    function fn_backspace() {
      if(oField != null) {
          oField.value = oField.value.substr(0, oField.value.length - 1);
      }
    }
  </script>

Tangentbordet ser ut så här:

<input type="button" name="1" value="1" onmousedown="fn_klistrain('1');" class="keyboard"><input type="button" name="2" value="2" onmousedown="fn_klistrain('2');" class="keyboard"><input type="button" name="3" value="3" onmousedown="fn_klistrain('3');" class="keyboard"><input type="button" name="4" value="4" onmousedown="fn_klistrain('4');" class="keyboard"><input type="button" name="5" value="5" onmousedown="fn_klistrain('5');" class="keyboard"><input type="button" name="6" value="6" onmousedown="fn_klistrain('6');" class="keyboard"><input type="button" name="7" value="7" onmousedown="fn_klistrain('7');" class="keyboard"><input type="button" name="8" value="8" onmousedown="fn_klistrain('8');" class="keyboard"><input type="button" name="9" value="9" onmousedown="fn_klistrain('9');" class="keyboard"><input type="button" name="0" value="0" onmousedown="fn_klistrain('0');" class="keyboard"><input type="button" name="Backspace" value="Back" onmousedown="fn_backspace();" class="keyboard"><br/>
<input type="button" name="q" value="Q" onmousedown="fn_klistrain('q');" class="keyboard"><input type="button" name="w" value="W" onmousedown="fn_klistrain('w');" class="keyboard"><input type="button" name="e" value="E" onmousedown="fn_klistrain('e');" class="keyboard"><input type="button" name="r" value="R" onmousedown="fn_klistrain('r');" class="keyboard"><input type="button" name="t" value="T" onmousedown="fn_klistrain('t');" class="keyboard"><input type="button" name="y" value="Y" onmousedown="fn_klistrain('y');" class="keyboard"><input type="button" name="u" value="U" onmousedown="fn_klistrain('u');" class="keyboard"><input type="button" name="i" value="I" onmousedown="fn_klistrain('i');" class="keyboard"><input type="button" name="o" value="O" onmousedown="fn_klistrain('o');" class="keyboard"><input type="button" name="p" value="P" onmousedown="fn_klistrain('p');" class="keyboard"><input type="button" name="å" value="Å" onmousedown="fn_klistrain('å');" class="keyboard"><br/>
<input type="button" name="a" value="A" onmousedown="fn_klistrain('a');" class="keyboard"><input type="button" name="s" value="S" onmousedown="fn_klistrain('s');" class="keyboard"><input type="button" name="d" value="D" onmousedown="fn_klistrain('d');" class="keyboard"><input type="button" name="f" value="F" onmousedown="fn_klistrain('f');" class="keyboard"><input type="button" name="g" value="G" onmousedown="fn_klistrain('g');" class="keyboard"><input type="button" name="h" value="H" onmousedown="fn_klistrain('h');" class="keyboard"><input type="button" name="j" value="J" onmousedown="fn_klistrain('j');" class="keyboard"><input type="button" name="k" value="K" onmousedown="fn_klistrain('k');" class="keyboard"><input type="button" name="l" value="L" onmousedown="fn_klistrain('l');" class="keyboard"><input type="button" name="ö" value="Ö" onmousedown="fn_klistrain('ö');" class="keyboard"><input type="button" name="ä" value="Ä" onmousedown="fn_klistrain('ä');" class="keyboard"><br/>
<input type="button" name="z" value="Z" onmousedown="fn_klistrain('z');" class="keyboard"><input type="button" name="x" value="X" onmousedown="fn_klistrain('x');" class="keyboard"><input type="button" name="c" value="C" onmousedown="fn_klistrain('c');" class="keyboard"><input type="button" name="v" value="V" onmousedown="fn_klistrain('v');" class="keyboard"><input type="button" name="b" value="B" onmousedown="fn_klistrain('b');" class="keyboard"><input type="button" name="n" value="N" onmousedown="fn_klistrain('n');" class="keyboard"><input type="button" name="m" value="M" onmousedown="fn_klistrain('m');" class="keyboard"><input type="button" name="" value="" onmousedown="fn_klistrain('');" class="keyboard"><input type="button" name="" value="" onmousedown="fn_klistrain('');" class="keyboard"><input type="button" name="Clear" value="Clr" onmousedown="fn_clear();" class="keyboard"><input type="submit" name="Enter" value="Enter" class="keyboard"><br/>

Nu skulle jag vilja lägga in en shift där, antingen så att nästa bokstav jag trycker på blir stor eller att den bokstav jag just tryckte på görs om till stor. Jag gissar att det sistnämnda är enklast? Någon som kan bistå med detta?

Med vänlig hälsning Peter

100 har läst, men inget svar. Gissar att det kanske inte går?

Nu har jag ingen aning här, kan inte Javascript, men den här funktionen minskar ju fältets antal tecken med 1:
oField.value = oField.value.substr(0, oField.value.length - 1);

Kan man med något motsvarande läsa värdet på det sista tecknet till en variabel, ta bort sista tecknet och sätta tillbaks det fast man tar bort 32 på ascii-värdet/eller om det finns ett UpperCase-kommando när man skriver tillbaks det?

Jag gissar att det är något virtuellt tangentbord du försöker göra? Du få nog skapa en ny funktion för shift (och en variabel som säger om shift är intryckt eller inte) som din kod (fn_klistrain) kolla om den är det och i så fall skicka in "A" istället för "a"

Något sådant här...

Jag har lagt till en CSS-klass som heter shifton som används för att markera att knappen just nu är "nertryckt". Ändra så att det passar stilen på sidan.

Notera att jag ändrade raden var oField = ... medan jag testade. Om koden ska vara helt korrekt bör det stå var oField = null; så att variabeln faktiskt får värdet null från början, vilket det inte får automatiskt annars.

Med den här koden ska du trycka shift först, vilket är den standard jag har sett på t ex mobiltelefoner.

<style type="text/css">

.shifton{
  background-color: #cfc;
}

</style>
<input type="text" name="field" id="field" value="" ><br />

<input type="button" name="1" value="1" onmousedown="fn_klistrain('1');" class="keyboard"><input type="button" name="2" value="2" onmousedown="fn_klistrain('2');" class="keyboard"><input type="button" name="3" value="3" onmousedown="fn_klistrain('3');" class="keyboard"><input type="button" name="4" value="4" onmousedown="fn_klistrain('4');" class="keyboard"><input type="button" name="5" value="5" onmousedown="fn_klistrain('5');" class="keyboard"><input type="button" name="6" value="6" onmousedown="fn_klistrain('6');" class="keyboard"><input type="button" name="7" value="7" onmousedown="fn_klistrain('7');" class="keyboard"><input type="button" name="8" value="8" onmousedown="fn_klistrain('8');" class="keyboard"><input type="button" name="9" value="9" onmousedown="fn_klistrain('9');" class="keyboard"><input type="button" name="0" value="0" onmousedown="fn_klistrain('0');" class="keyboard"><input type="button" name="Backspace" value="Back" onmousedown="fn_backspace();" class="keyboard"><br/>
<input type="button" name="q" value="Q" onmousedown="fn_klistrain('q');" class="keyboard"><input type="button" name="w" value="W" onmousedown="fn_klistrain('w');" class="keyboard"><input type="button" name="e" value="E" onmousedown="fn_klistrain('e');" class="keyboard"><input type="button" name="r" value="R" onmousedown="fn_klistrain('r');" class="keyboard"><input type="button" name="t" value="T" onmousedown="fn_klistrain('t');" class="keyboard"><input type="button" name="y" value="Y" onmousedown="fn_klistrain('y');" class="keyboard"><input type="button" name="u" value="U" onmousedown="fn_klistrain('u');" class="keyboard"><input type="button" name="i" value="I" onmousedown="fn_klistrain('i');" class="keyboard"><input type="button" name="o" value="O" onmousedown="fn_klistrain('o');" class="keyboard"><input type="button" name="p" value="P" onmousedown="fn_klistrain('p');" class="keyboard"><input type="button" name="å" value="Å" onmousedown="fn_klistrain('å');" class="keyboard"><br/>
<input type="button" name="a" value="A" onmousedown="fn_klistrain('a');" class="keyboard"><input type="button" name="s" value="S" onmousedown="fn_klistrain('s');" class="keyboard"><input type="button" name="d" value="D" onmousedown="fn_klistrain('d');" class="keyboard"><input type="button" name="f" value="F" onmousedown="fn_klistrain('f');" class="keyboard"><input type="button" name="g" value="G" onmousedown="fn_klistrain('g');" class="keyboard"><input type="button" name="h" value="H" onmousedown="fn_klistrain('h');" class="keyboard"><input type="button" name="j" value="J" onmousedown="fn_klistrain('j');" class="keyboard"><input type="button" name="k" value="K" onmousedown="fn_klistrain('k');" class="keyboard"><input type="button" name="l" value="L" onmousedown="fn_klistrain('l');" class="keyboard"><input type="button" name="ö" value="Ö" onmousedown="fn_klistrain('ö');" class="keyboard"><input type="button" name="ä" value="Ä" onmousedown="fn_klistrain('ä');" class="keyboard"><br/>
<input type="button" name="z" value="Z" onmousedown="fn_klistrain('z');" class="keyboard"><input type="button" name="x" value="X" onmousedown="fn_klistrain('x');" class="keyboard"><input type="button" name="c" value="C" onmousedown="fn_klistrain('c');" class="keyboard"><input type="button" name="v" value="V" onmousedown="fn_klistrain('v');" class="keyboard"><input type="button" name="b" value="B" onmousedown="fn_klistrain('b');" class="keyboard"><input type="button" name="n" value="N" onmousedown="fn_klistrain('n');" class="keyboard"><input type="button" name="m" value="M" onmousedown="fn_klistrain('m');" class="keyboard"><input type="button" name="" value="" onmousedown="fn_klistrain('');" class="keyboard"><input type="button" name="" value="" onmousedown="fn_klistrain('');" class="keyboard"><input type="button" name="Clear" value="Clr" onmousedown="fn_clear();" class="keyboard"><input type="submit" name="Enter" value="Enter" class="keyboard"><br/>

<input type="button" name="shift" id="shift" value="SHIFT" onmousedown="fn_toggleshift();" class="keyboard ">

  <script language="JavaScript">
    var oField = document.getElementById('field');
    var bShift = false;

    function fn_updateshift() {
      if(bShift) {
        document.getElementById('shift').className="keyboard shifton";
      }else{
        document.getElementById('shift').className="keyboard";
      }
    }

    function fn_clearshift() {
      bShift = false;
      fn_updateshift();
    }

    function fn_toggleshift() {
      bShift = !bShift;
      fn_updateshift();
    }

    function fn_choose(obj) {
      oField = obj;
    }

    function fn_klistrain(num) {
      if (bShift) {
        num = num.toUpperCase();
      }

      if(oField != null) {
          oField.value += num;
      }
      fn_clearshift();
    }
    function fn_clear() {
      if(oField != null) {
          oField.value = '';
      }
      fn_clearshift();
    }
    function fn_backspace() {
      if(oField != null) {
          oField.value = oField.value.substr(0, oField.value.length - 1);
      }
      fn_clearshift();
    }
  </script>

Det där fungerade ju toppen!

Jag har dock inte ändrat oField, kanske inte spelar någon roll i det här fallet. Det fungerar som jag vill i alla fall.

Tack!

Skillnaden är att om du inte ändrar den raden så kommer ett fel genereras i bakgrunden om man trycker på en knapp innan man har valt ett fält. Felet sker på raden if(oField != null) där man försöker komma åt en variabel som inte ännu har ett värde. Det gör egentligen ingen skillnad för användaren, men jag gillar att veta att koden körs utan fel under huven.
...
Fast vid en närmare koll visar det sig att jag hade fel. Raden var oField gör att oField definieras och beter sig som om oField är null även om den får värdet undefined när man försöker komma åt den. Med andra ord körs aldrig oField.value += num; av misstag innan oField har ett värde och allt är som det ska.

Welcome to the whacky world of Javascript.

:)