HTML輸入框只讀--- javascript按鈕覆蓋文本

Question

這是一個js小提琴示例：

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屬性並替換了文本。 我如何防止這種情況發生，因此它始終是只讀的。

Answer 1

如果您不希望按鈕更改readonly輸入，則可以將jQuery選擇器更改為：

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

的jsfiddle

Answer 2

您應該使用disabled而不是readonly. 這在此更新的小提琴中起作用。 http://jsfiddle.net/YD6PL/110/ 。 這將阻止用戶選擇該框，因此他們將無法對其進行更改。 不知道他們是否也需要突出顯示其中的文本，但是請首先嘗試！