首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在使用jquery/javascript单击div时向文本框中添加字符

如何在使用jquery/javascript单击div时向文本框中添加字符
EN

Stack Overflow用户
提问于 2018-07-05 08:50:57
回答 4查看 253关注 0票数 1

我正在构建自己的jquery键盘,当点击或触摸div时,我需要在x字段中输入x字符。

这是我的一些键盘HTML结构:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
$( "#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来做到这一点?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-07-05 08:58:59

此代码段将字母添加到文本框中。如果只想放置单击的字母,请删除变量currentName

代码语言:javascript
复制
$("div.key").click(function(e){
  var currentName = $("#name").val();
  $("#name").val(currentName + $(this).text());
});
代码语言:javascript
复制
.key{
border: 1px solid #333;
padding: 2px;
width: 16px;
margin: 1px;
}
代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2018-07-05 09:11:08

你不需要编写每一次点击div的代码,相反,你可以使用类选择器。并且您可以每次获取输入值以附加到它。

代码语言:javascript
复制
<script type="text/javascript">
    $(".key").click(function() {
    $('#name').val($('#name').val() + this.innerText);
});
</script>
票数 1
EN

Stack Overflow用户

发布于 2018-07-05 08:52:36

您可以获取输入的当前值,然后将您的新字母附加到其中:

$("#name").val($("#name").val() + "Q");

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51182138

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档