Question

这是一个小小的例子：

HTML：

<input type="text" value="a" readonly>
<input type="text">
<input type="text">
<div>
<button class="buttons">c</button>
<button class="buttons">a</button>
<button class="buttons">t</button>
</div>

JS：

$(document).ready(function () {

    $('input').click(function(){
        $(this).addClass('active').siblings('.active').removeClass('active')
    });

    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $('input.active').val(cntrl);
    });
});

当用户使用键盘尝试输入某些内容时，readonly属性起作用。＆＃39; a＆＃39;在上面的例子中。但是当用户单击按钮以插入文本时，它似乎胜过readonly属性并替换文本。如何防止这种情况发生，以便它始终是只读的。

Answer 1

如果您不希望按钮更改readonly输入，可以将jQuery选择器更改为：

$('input.active:not([readonly])').val(cntrl);

JSFiddle

Answer 2

你应该使用disabled而不是readonly.这可以在这个更新的小提琴中使用。 http://jsfiddle.net/YD6PL/110/。这将阻止用户选择该框，以便他们无法更改它。不确定他们是否也需要能够突出显示那里的文字，但请先尝试一下！

HTML输入框readonly --- javascript按钮覆盖文本

2 个答案: