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

下面是一个js fiddle示例：

HTML:

---

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

您应该使用

禁用的

而不是

只读的。

在这个更新的小提琴中工作。这将阻止用户选择框，因此他们无法更改它。不确定他们是否也需要突出显示其中的文本，但请先尝试

如果不希望按钮更改

只读输入，可以将jQuery选择器更改为：

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

我认为您对
readonly
属性的作用存在误解。Javascript不会“服从”
readonly
，除非您让它寻找它。它只针对ui端。那么，您能不能不让onclick事件更改输入？似乎是一个简单的解决方案？thx imtheman，这确实是我不明白的地方。@mtcrts70没问题。很高兴我能帮忙。
$(document).ready(function () {

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

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

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