单击按钮将焦点保持在文本框中

Question

我正在尝试制作一个简单的计算器。我有按钮在文本框中写数字。

我需要做的是当我选择文本框1并单击按钮时，应在文本框1中输入数字，当我选择文本框2并单击按钮时，应在文本框2中输入数字。

我尝试了许多不同的方法，但没有任何方法正常，所以如果你有一个想法如何解决这个问题请写。 THX！

Answer 1

你应该记住＆＃34;哪个textarea最后关注（为textareas创建焦点事件的处理程序），而不是单击任何＆＃34;数字按钮＆＃34;，而是最新聚焦文本区域中按钮的值。小心并且只跟踪前两个textareas的焦点事件，最后一个应该是readonly。

Answer 2

在思考了一点之后，我意识到使用div而不是按钮是无意义的，正如我在你对你的问题的评论中所说的那样。

当我们将输入保存在javascript变量中时，我们可以使用它们的值，并且无关紧要。

这是我使用更加语义的按钮更新的jsfiddle：https://jsfiddle.net/wsd8ovm5/1/

HTML

<div class="wrapper">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
</div>
<div class="wrapper">
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
</div>
<div class="wrapper">
    <button class="btn">7</button>
    <button class="btn">8</button>
    <button class="btn">9</button>
</div>
<div class="wrapper">
    <button class="btn">0</button>
</div>
<div>
    <br>
    <input type="text" id="input1"/> <br>
    <input type="text" id="input1"/>
</div>

的Javascript

$(document).ready(function(){
    var input1 = $('#input1'),
        input2 = $('#input1'),
        activeInput = input1;

    activeInput.focus(); //set focus

    $('input').on('focus', function(){
        //Save the last focused input
        activeInput = $(this);    
    });

    $('.btn').on('click', function(){
        //Append the button value, adding a empty string to prevent the sum of both values.
        activeInput.val(activeInput.val() + '' + $(this).text());

        //Convert the input value to float
        activeInput.val(parseFloat(activeInput.val()));
    });
});