如何在使用jquery/javascript单击div时向文本框中添加字符
如何在使用jquery/javascript单击div时向文本框中添加字符
提问于 2018-07-05 08:50:57
我正在构建自己的jquery键盘，当点击或触摸div时，我需要在x字段中输入x字符。
这是我的一些键盘HTML结构：
<input id="name" name="name" type="text" />
<div class="key-row" style="width: 1092px;">
<div id="k-q" class="key">Q</div>
<div id="k-w" class="key">W</div>
<div id="k-e" class="key">E</div>
<div id="k-r" class="key">R</div>
<div id="k-t" class="key">T</div>
<div id="k-y" class="key">Y</div>
<div id="k-u" class="key">U</div>
<div id="k-i" class="key">I</div>
<div id="k-o" class="key">O</div>
<div id="k-p" class="key">P</div>
</div>这是我正在开发的jquery：
$( "#k-q" ).click(function() {
//alert( "Q pressed" );
// $('#name').append('Q');
// $("input[type='text']").append('some new text')
// $('#name').add( "aaaaa" );
//$('#name').text('Q');
$('#name').val('Q');
});如你所见，我已经尝试了不同的输入方法。唯一做这项工作的是使用var()方法的那个，但我不能使用它，因为它只替换已经输入的文本。我需要这样一种方式:如果我按下"Q“3次，字母"Q”就会在文本框中出现3次。
我如何使用jquery或javascript来做到这一点？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-07-05 08:58:59
此代码段将字母添加到文本框中。如果只想放置单击的字母，请删除变量currentName
$("div.key").click(function(e){
var currentName = $("#name").val();
$("#name").val(currentName + $(this).text());
});.key{
border: 1px solid #333;
padding: 2px;
width: 16px;
margin: 1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" name="name" type="text" />
<div class="key-row" style="width: 1092px;">
<div id="k-q" class="key">Q</div>
<div id="k-w" class="key">W</div>
<div id="k-e" class="key">E</div>
<div id="k-r" class="key">R</div>
<div id="k-t" class="key">T</div>
<div id="k-y" class="key">Y</div>
<div id="k-u" class="key">U</div>
<div id="k-i" class="key">I</div>
<div id="k-o" class="key">O</div>
<div id="k-p" class="key">P</div>
</div>
Stack Overflow用户
发布于 2018-07-05 09:11:08
你不需要编写每一次点击div的代码，相反，你可以使用类选择器。并且您可以每次获取输入值以附加到它。
<script type="text/javascript">
$(".key").click(function() {
$('#name').val($('#name').val() + this.innerText);
});
</script>Stack Overflow用户
发布于 2018-07-05 08:52:36
您可以获取输入的当前值，然后将您的新字母附加到其中：
$("#name").val($("#name").val() + "Q");
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51182138
复制相关文章
相似问题
腾讯云开发者
