Question

我有一个使用HTML和CSS构建的键盘，我试图弄清楚按下时如何输入键（div）字母。我需要将这些字母放在最后一个重点突出的输入字段中。

这就是现在所拥有的：

//Here I enter the characters (key letters) in the last focused field
$("div.key").click(function(e) {

    //Here I get the last focus
    var lastFocused;
    lastFocused = $('#registration-area').find('input.item').focus();

    //Here I enter the pressed keys
    var current_text = lastFocused.val();
    var cursor_position = lastFocused.selectionStart;
    var new_text = $(this).text();
    current_text = [current_text.slice(0, cursor_position), new_text, current_text.slice(cursor_position)].join('');
    lastFocused.val(current_text);
    lastFocused.focus();

});

这是HTML的一部分：

<input id="firstName" name="firstName" type="text" required/>
<input id="lastName" name="lastName" type="text" required/>

<div class="row">
    <div class="key-row" style="width: 1040px;">
        <div id="k-a" class="key key-btn">a</div>
        <div id="k-s" class="key key-btn">s</div>
        <div id="k-d" class="key key-btn">d</div>
        <div id="k-f" class="key key-btn">f</div>
        <div id="k-g" class="key key-btn">g</div>
        <div id="k-h" class="key key-btn">h</div>
        <div id="k-j" class="key key-btn">j</div>
        <div id="k-k" class="key key-btn">k</div>
        <div id="k-l" class="key key-btn">l</div>
        <div id="k-ñ" class="key key-btn">ñ</div>
    </div>
</div>

如果有人可以告诉我我在做什么错，我将非常感激。

Answer 1

这是基本的解决方案，请检查并更新/编辑/更改/验证您的需求。

var lastFocused;
$(".item").focusout( function(e) {
  lastFocused = e.target;
});

//Here I enter the characters (key letters) in the last focused field
$("div.key").click(function(e) {

    //Here I enter the pressed keys
    var current_text = lastFocused.value;

   console.log('1: '+current_text);
   
    var cursor_position = current_text.length; //lastFocused.selectionStart;
 // here I just count current value lenght insted selectionStart for fixing add new char to input on  correct place for input email type
    var new_text = $(this).text();
    
    current_text = [current_text.slice(0, cursor_position), new_text, current_text.slice(cursor_position)].join('');
    
    lastFocused.value = current_text;
    lastFocused.focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="firstName" name="firstName" type="email" class="item" required/>
<input id="lastName" name="lastName" type="email" class="item" required/>

<div class="row">
    <div class="key-row" style="width: 1040px;">
        <div id="k-a" class="key key-btn">a</div>
        <div id="k-s" class="key key-btn">s</div>
        <div id="k-d" class="key key-btn">d</div>
        <div id="k-f" class="key key-btn">f</div>
        <div id="k-g" class="key key-btn">g</div>
        <div id="k-h" class="key key-btn">h</div>
        <div id="k-j" class="key key-btn">j</div>
        <div id="k-k" class="key key-btn">k</div>
        <div id="k-l" class="key key-btn">l</div>
        <div id="k-ñ" class="key key-btn">ñ</div>
    </div>
</div>

Answer 2

我认为这里的问题是在“存储器”中保留最后一个重点领域。

lastFocused = $('#registration-area').find('input.item').focus();

以上一行实际上将重点放在集合中的第一个 .item ...而不是让您获得最后一个“先前”关注的焦点。这是第一个问题。

我建议您删除«这里得到最后一个焦点»部分，这是错误的，这是错误的（在点击处理程序之外）：

var lastFocused;
$('#registration-area input.item').on('focus',function(){
  lastFocused = $(this);
});

然后，假设您下面的函数中剩余的内容在起作用...（关于光标位置...我不确定...）：

$("div.key").click(function(e) {
  var current_text = lastFocused.val();
  var cursor_position = lastFocused.selectionStart;
  var new_text = $(this).text();
  current_text = [current_text.slice(0, cursor_position), new_text, current_text.slice(cursor_position)].join('');
  lastFocused.val(current_text);
  lastFocused.focus();
});

尝试一下。 ;）

在最后一个焦点输入字段内输入div值

2 个答案: