how to input text in correct order

Question

i have a text field having class=answer and have 12 keys 1,2,3,4,5,6,7,8,9,0,del,clear.

$('.answer').on('click', function() {
  activeFill = $(this);
});

var lastAddedText = '';



$('.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.extra1,.extra2').on 'click',
  function() {
    if (activeFill !== 'undefined') {
      var lastAddedText = $(this).html();
      // append content
      var prevContent = $(activeFill).val();
      // if condition to check if text already present or not
      $(activeFill).val(prevContent + lastAddedText);
    }
  });

$('.delete').on('click', function() {

  var $myInput = $(activeFill);
  $myInput.val($myInput.val().slice(0, -1));
});

$('button.clear').on('click', function() {
      $(active

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="answer" />
<div class="keys">
  <center>
    <button class="one" style="font-weight:bold">1</button>
    <button class="two" style="font-weight:bold">2</button>
    <button class="three" style="font-weight:bold">3</button>
    <button class="four" style="font-weight:bold">4</button>
    <button class="five" style="font-weight:bold">5</button>
    <button class="six" style="font-weight:bold">6</button>
    <button class="seven" style="font-weight:bold">7</button>
    <button class="eight" style="font-weight:bold">8</button>
    <button class="nine" style="font-weight:bold">9</button>
    <button class="zero" style="font-weight:bold">0</button>
    <button class="extra1" style="font-weight:bold">i</button>
    <button class="extra2" style="font-weight:bold">-</button>
    <button class="clear" style="font-weight:bold">Clear</button>
    <button class="delete" style="font-weight:bold">Del</button>

when i am clicking the textfield and then the key the value of the key comes to the textfield but the problem is suppose i have entered 124 in textfeild and now i want to enter 3 before 4 so i click my cursor before 3 and press the key but still 3 is typed after 4 like 1243.

$('.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.extra1,.extra2,.extra3,.extra4,.extra5,.extra6,.extra7').on('click',function() {


var prev = $("#txt1").val();
var num = this.value;
var pos = $("#txt1")[0].selectionStart;

var newValue = prev.substring(0, pos) + num + prev.substring(pos);
$("#txt1").val(newValue);
$("#txt1")[0].setSelectionRange(pos+1, pos+1);





var prev1 = $("#txt").val();
var num1 = this.value;
var pos1 = $("#txt")[0].selectionStart;

var newValue1 = prev.substring(0, pos1) + num + prev.substring(pos1);
$("#txt").val(newValue1);
$("#txt")[0].setSelectionRange(pos1+1, pos1+1);

      });

html

    <div class="cnt3"><input type='text' id="txt" class='answer1'  style='background-      color:#FFFFA8; height:32px;font-size:24px; width:400px; text-align:center; color:red;' />


 <div class="cnt5"><input type='text' id="txt1" class='answer2'  style='background-color:#FFFFA8; height:32px;font-size:24px; width:400px; text-align:center; color:red;' /></div>

Answer 1

You are currently appending the characters. What you need to do is, to insert the characters at the cursor position. So, first extract the characters before the cursor position, then append your character to it, and then append the remaining characters from the cursor position.

selectionStart is your friend here. Here is a quick example. Rest you can build upon.

/* Javsscript / jQuery Code */

$(".num").on("click", function(e) {
    var prev = $("#txt").val();
    var num = this.value;
    var pos = $("#txt")[0].selectionStart;
    var newValue = prev.substring(0, pos) + num + prev.substring(pos);
    $("#txt").val(newValue);
    
    // By default assigning the new value will reset selection
    // If you want to continue inserting, 
    // you will have to reselect at the earlier position
    // Add 1 to the earlier position bcoz insertion of 1 character...
    // will advance your insertion position
    $("#txt")[0].setSelectionRange(pos+1, pos+1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->

<input id="txt" type="text" /><br/><br/>
<input type="button" value="1" class="num" />
<input type="button" value="2" class="num" />
<input type="button" value="3" class="num" />

---

Update:

You can adapt this code to use as many inputs you want to control with same set of button. Just need to keep track of which input was clicked for entry and also release the tracking once any other element is clicked.

var $txt = null; // Keep track of currently active input

$("input[type='text']").on("focus", function(e) {
    $txt = $(this); // Click any input, the tracker will point to it
});

$("body").on("click", function(e) {
    // Click anywhere else apart from the inputs, clear the tracker
    if (! $(e.target).is("input")) {
        $txt = null;
    }
});

$("input.num").on("click", function(e) {
    if (! $txt) return false; // If tracker is cleared, just return
    
    var prev = $txt.val();
    var num = this.value;
    var pos = $txt[0].selectionStart;
    var newValue = prev.substring(0, pos) + num + prev.substring(pos);
    $txt.val(newValue);
    $txt[0].setSelectionRange(pos+1, pos+1);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="txt1" type="text" />
<input id="txt2" type="text" />
<br/><br/>
<input type="button" value="1" class="num" />
<input type="button" value="2" class="num" />
<input type="button" value="3" class="num" />

Here is a link to a fiddle demo, in case you need to play with it: http://jsfiddle.net/abhitalks/au61tunL/

.

Answer 2

Well, it is going wrong at this line $(activeFill).val(prevContent + lastAddedText); because you are just detecting every new key-press and appending it to $(activeFill).val

You ought to look into the DOM and get the current value of the text in the input field and the cursor position and insert the value of the clicked button there (or delete the previous character, if any).

There is a very good answer explaining how to do this at Get cursor position (in characters) within a text Input field