1

我有一个使用 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/

4

3 回答 3

2

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

$('.I').click(function(){
    $('#code').val($('#code').val()+"I");
});
$('.O').click(function(){
    $('#code').val($('#code').val()+"O");
});
于 2013-04-13T02:59:07.047 回答
0

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

<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

于 2013-04-13T03:14:10.663 回答
0

正如 John S 所说 - 你会想要使用.val()而不是.text(). 如果您在一个页面上有多个实例并且您不想重复自己，我提供了一个解决方案。

#foo是单击文本输入修饰符时要更改的文本输入。ul[data-change]可以是修饰符的容器，并具有一个属性data-change来指定input修饰符将针对的页面上的哪个元素。每个a修饰符元素都有一个data-value属性，该属性指定将添加到目标inputon的内容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/

于 2013-04-13T03:15:50.950 回答