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

HTML input box readonly---javascript button overrides text

本文关键字：按钮 覆盖 文本 --javascript 只读 输入 HTML      更新时间：2023-09-26

下面是一个js-fiddle示例：

http://jsfiddle.net/YD6PL/110/

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);
    });
});

在上例中，当用户使用键盘尝试通过"a"输入内容时，readonly属性起作用。但是，当用户单击按钮插入文本时，它似乎胜过只读属性并替换文本。我如何才能防止这种情况发生，使其始终只读。

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

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

JSFiddle

您应该使用disabled，而不是在这个更新的fiddle中工作的readonly.。http://jsfiddle.net/YD6PL/110/.这将阻止用户选择框，因此他们将无法更改它。不确定是否也需要突出显示框中的文本，但请先尝试！

相关文章：