Question

我有一个带有class = answer的文本字段，并有12个密钥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>

当我点击文本字段然后键，键的值来到文本字段但问题是假设我在textfeild中输入了124，现在我想在4之前输入3所以我在3之前点击我的光标按键，但仍然按3键输入3，如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

您目前正在追加角色。您需要做的是，在光标位置插入字符。因此，首先在光标位置之前提取字符，然后将字符附加到它，然后从光标位置追加剩余的字符。

selectionStart是你的朋友。这是一个简单的例子。你可以继续休息。

/* 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" />

<强> 更新

您可以调整此代码以使用同一组按钮来控制要控制的输入。只需要跟踪点击输入的输入，并在点击任何其他元素后释放跟踪。

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" />

以下是小提琴演示的链接，以防您需要使用它：http://jsfiddle.net/abhitalks/au61tunL/

Answer 2

嗯，这一行$(activeFill).val(prevContent + lastAddedText);出错了，因为您只是检测到每个新的按键，将追加到$(activeFill).val

您应该查看DOM并在输入字段和光标位置获取文本的当前值，并在其中插入单击按钮的值（或删除前一个字符，如果有）。

有一个非常好的答案，解释如何在Get cursor position (in characters) within a text Input field

执行此操作

如何以正确的顺序输入文本

2 个答案: