Question

我有一个使用disabled属性禁用的文本输入，但我在点击某个类时添加了输入。

在单击I类（.I）时，我在输入中的现有文本（如果有）中添加了一个字母I.

在单击O（.O）类时，我在输入中的现有文本（如果有）中添加了一个字母O.

但是，当我点击课程时似乎没有发生任何事情。

这是我的代码：

    $('.I').click(function(){
        $('#code').text($('#code').text()+"I");
    });
    $('.O').click(function(){
        $('#code').text($('#code').text()+"O");
    });

这是一个JSFiddel复制问题：http://jsfiddle.net/q3xBY/

Answer 1

要获取和设置输入元素的值，您应该使用.val()而不是.text()。

$('.I').click(function(){
    $('#code').val($('#code').val()+"I");
});
$('.O').click(function(){
    $('#code').val($('#code').val()+"O");
});

Answer 2

不是像这样对每次点击进行硬编码，而是为所有按钮提供相同的类：

<button class="I button">I</button>
<button class="O button">O</button>

然后你可以应用jQuery来实现你所描述的内容：

$('.button').click(function(event) {
    var text = $(this).text();
    $('input:text').val(function(index, val) {
        return val + text;
    });
});

的 Updated Demo

Answer 3

正如John S所说 - 你将要使用.val()而不是.text()。如果你在一个页面上有多个这样的实例，而你不想重复，我已经提供了一个解决方案。

#foo是您在单击文本输入修饰符时要更改的文本输入。 ul[data-change]可以是修饰符的容器，并且具有data-change属性，用于指定修饰符将定位到页面上的哪个input元素。每个a修饰符元素都有data-value属性，用于指定要添加到input上的目标mouseclick的内容。

HTML：

<input type="text" id="foo" value="" disabled="disabled" />
<ul data-change="#foo">
    <li><button id="i" data-value="i">i</button></li>
    <li><button id="a" data-value="a">a</button></li>
</ul>

JS：

$('[data-change] button').on('click', function(){
    var target = $(this).closest('[data-change]').data('change');
   $(target).val( $(target).val() + $(this).data('value') );
});

这是一个小提琴：http://jsfiddle.net/vpC6D/1/

试图在输入中附加字母到文本

3 个答案: