在最后一个聚焦输入字段中输入 div 值

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();
});

试试吧，;)