insert keyboard character value into middle of text in input textbox

Question

functionality:

User can input a char var into the input text box via an onscreen Javascript keyboard.

What has been done:

I have created the javascript keyboard. Have also created the input text box and also created the method call to add the char into the textbox when a key on the javascript keyboard has been clicked.

Issue:

The issue happens when I am trying to insert a char in the middle of the text, the char will only be added at the end of the text rather than inserted where I have clicked on.

Meaning: For the word, TEST.If I were to try to insert the char 'E' in between 'E' and 'S', it will be displayed as TESTE instead of TEEST.

I would like to ask for help in this as I am unsure what have I missed out..thanks.

Code:

//Keyboard InputField
$("#NameField").focus(function() {
  $write = $('#NameField');
  $("#keyboard").show();
});

function accept() {


  //To reset all fields: NameField and EmailField reset to empty value
  $("#NameField").val("");
  $("#EmailField").val("");
  $('#page').fadeOut({
    duration: slideDuration,
    queue: false
  });

  //Keyboard Script
  //To remove 'click' event before adding new click 'event' everytime after page is loaded: allow keyboard character event to be run only once only when page is loaded
  $('#Vivo_Print_Email').fadeIn({
    duration: slideDuration,
    queue: false,
    complete: function() {
      $('#keyboard li').off('click').on('click', function() {
        console.log("click");
        idleTime = 0;

        var $this = $(this),
          character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
        console.log(character);
        // Shift keys
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
          $('.letter').toggleClass('uppercase');
          $('.symbol span').toggle();

          shift = (shift === true) ? false : true;
          capslock = false;
          return false;
        }

        // Caps lock
        if ($this.hasClass('capslock')) {
          $('.letter').toggleClass('uppercase');
          capslock = true;
          return false;
        }

        // Delete
        if ($this.hasClass('delete')) {
          var html = $write.val();

          $write.val(html.substr(0, html.length - 1));
          return false;
        }

        // Clear
        if ($this.hasClass('clear')) {
          var html = $write.val();

          $write.val("");
          return false;
        }

        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        if ($this.hasClass('space')) character = ' ';
        if ($this.hasClass('tab')) character = "\t";
        if ($this.hasClass('return')) character = "\n";

        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();

        // Remove shift once a key is clicked.
        if (shift === true) {
          $('.symbol span').toggle();
          if (capslock === false) $('.letter').toggleClass('uppercase');

          shift = false;
        }
        // Add the character
        $write.val($write.val() + character);
      });
    }
  });
}

 /* Keyboard CSS*/
 .keyboard {
   position: absolute;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .keyboard li {
   font-size: 20px;
   float: left;
   margin: 2 2 2 2;
   width: 65px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   color: #000;
   background: #ffffff;
   border: 1px solid #000;
   -moz-border-radius: 5px;
   list-style: none;
   -webkit-border-radius: 5px;
 }
 .capslock,
 .tab,
 .left-shift {
   clear: left;
 }
 .keyboard .tab,
 .keyboard .delete {
   width: 165px;
 }
 .keyboard .capslock {
   width: 101px;
 }
 .keyboard .return {
   width: 101px;
 }
 .keyboard .left-shift {
   width: 165px;
 }
 .keyboard .right-shift {
   width: 165px;
 }
 .lastitem {
   margin-right: 0;
 }
 .uppercase {
   text-transform: uppercase;
 }
 .keyboard .space {
   clear: left;
   width: 685px;
 }
 .on {
   display: none;
 }
 .keyboard li:hover {
   position: relative;
   top: 1px;
   left: 1px;
   border-color: #e5e5e5;
   cursor: pointer;
 }

<div id="TextBox" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat;  z-index=18; top:0px; left:0px;">

  <!--Email Buttons-->
  <table align="center" cellspacing="0" cellpadding="0" width="1080" top="550px">
    <tr style="height: 1920;">
      <td width="1080">
        <div id="email_wrong" style="z-index:99; position:absolute; top:190px; left:760px; display: none; font-size:20px; font-family:'CenturyGothic'; width:1080; color:#000000;"><font face="CenturyGothic">* Please fill in all fields.</font>
        </div>

        <input type="text" id="NameField" style="position:absolute; top:220px; left:760px; height:50px; width:485px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index:100;" autofocus src="lib/VivoCity/img/transparent.png">

        <button id="Submit" onclick="Submit()">
          <img src="lib/img/PAGE08/SubmitButton.png">
        </button>

        <ul class="keyboard" id="keyboard" style="z-index:19; position:absolute;left:600px; top: 400px; color: #000000;">
          <font face="CenturyGothic"><li class="symbol"><span class="off">1</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">2</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">3</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">4</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">5</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">6</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">7</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">8</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">9</span></li></font>
          <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">0</span></li></font>

          <font face="CenturyGothic"><li class="letter" style="clear: left;">q</li></font>
          <font face="CenturyGothic"><li class="letter">w</li></font>
          <font face="CenturyGothic"><li class="letter">e</li></font>
          <font face="CenturyGothic"><li class="letter">r</li></font>
          <font face="CenturyGothic"><li class="letter">t</li></font>
          <font face="CenturyGothic"><li class="letter">y</li></font>
          <font face="CenturyGothic"><li class="letter">u</li></font>
          <font face="CenturyGothic"><li class="letter">i</li></font>
          <font face="CenturyGothic"><li class="letter">o</li></font>
          <font face="CenturyGothic"><li class="letter lastitem">p</li></font>

          <font face="CenturyGothic"><li class="letter" style="clear: left;">a</li></font>
          <font face="CenturyGothic"><li class="letter">s</li></font>
          <font face="CenturyGothic"><li class="letter">d</li></font>
          <font face="CenturyGothic"><li class="letter">f</li></font>
          <font face="CenturyGothic"><li class="letter">g</li></font>
          <font face="CenturyGothic"><li class="letter">h</li></font>
          <font face="CenturyGothic"><li class="letter">j</li></font>
          <font face="CenturyGothic"><li class="letter">k</li></font>
          <font face="CenturyGothic"><li class="letter">l</li></font>
          <font face="CenturyGothic"><li class="letter lastitem">z</li></font>

          <font face="CenturyGothic"><li class="letter" style="clear: left;">x</li></font>
          <font face="CenturyGothic"><li class="letter">c</li></font>
          <font face="CenturyGothic"><li class="letter">v</li></font>
          <font face="CenturyGothic"><li class="letter">b</li></font>
          <font face="CenturyGothic"><li class="letter">n</li></fint>
                            <font face ="CenturyGothic"><li class="letter">m</li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">@</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">.</span></li></font>
          <font face="CenturyGothic"><li class="symbol"><span class="off">-</span></li></font>
          <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">_</span></li></font>

          <font face="CenturyGothic"><li class="symbol" style="clear: left; width: 75px;"><span class="off">.com</span></li></font>
          <font face="CenturyGothic"><li class="symbol" style="width: 200px;"><span class="off">@hotmail.com</span></li></font>
          <font face="CenturyGothic"><li class="symbol" style="width: 200px;"><span class="off">@yahoo.com</span></li></font>
          <font face="CenturyGothic"><li class="symbol" style="width: 198px;"><span class="off">@gmail.com</span></li></font>

          <font face="CenturyGothic"><li class="clear" style=" clear: left; width: 330px;">Clear</li></font>
          <font face="CenturyGothic"> <li class="delete lastitem" style="width: 349px;">Backspace</li></font>

          <font face="CenturyGothic"><li class="space lastitem">Space &nbsp;</li></font>
        </ul>
      </td>
    </tr>
  </table>
</div>

Possible duplicate of [Insert text into textarea at cursor position (Javascript)](http://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript) — Tomboyo, Apr 06 '16 at 02:30
Your question is how to insert text at the cursor position in an element, which is exactly the question the SO thread I cited addresses. As Kimdung pointed out, your approach does not work because `$write.val($write.val() + character);` merely appends a character to the value of the element. You should be able to achieve what you want by implementing the range selection tools outlined in that link instead of the append code you currently have. — Tomboyo, Apr 06 '16 at 19:04
Constructive criticism: the font tag is deprecated/unsupported in HTML5. Moving the font-face to your style for the ```#keyboard li``` selector would fix. As for the insert text, @Tomboyo correctly linked to an example indicating how to do this. You need to look at splitting your text into two chunks based on the current cursor position, then setting the textbox value to the concatination of the three bits combined. Lastly, your provided code doesn't work as is at all, it is missing something: https://jsfiddle.net/Omnilord/suw6ad1m/1/ Would you be able to correct? — Omnilord, Apr 06 '16 at 19:38
@Tomboyo, I am trying the `$('input[type=text]').on('click', function() { var cursorPos = $('#NameField').prop('selectionStart'); var nameInput = $('#NameField').val(); var textBefore = nameInput.substring(0, cursorPos); var textAfter = nameInput.substring(cursorPos, v.length); $('#NameField').val(textBefore + $(this).val() + textAfter); });`method, could I still retain the current method and this method be of a separate method? — Luke, Apr 07 '16 at 02:11

score 0 · Answer 1 · answered Apr 06 '16 at 02:23

0

I guess you are missing to implement the case that you want to insert any char in the middle. When I take a look in your code, the new inputted char is added to the end only

 // Add the character
        $write.val($write.val() + character);

answered Apr 06 '16 at 02:23

Tran Ho

1,442
9
15

realise that, I would like to ask for your help on this. – Luke Apr 06 '16 at 02:26

insert keyboard character value into middle of text in input textbox

1 Answers1