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

下面是一個JS提琴例如：HTML輸入框只讀--- JavaScript的按鈕覆蓋文本

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'的內容時起作用充足。但是當用戶點擊一個按鈕來插入文本時，它似乎超過了只讀屬性並替換了文本。我怎樣才能防止這種情況發生，因此它總是隻讀的。

來源

2014-09-12 mtcrts70

我認爲你有一個誤解，以什麼'readonly'屬性呢。除非你讓它看起來，否則Javascript不會「只讀」。它僅用於用戶端。 – imtheman 2014-09-12 21:41:38

那麼，你能不能讓onclick事件改變輸入？看起來像一個簡單的修復？ – 2014-09-12 21:42:45

thx imtheman，那的確是我不瞭解的。 – mtcrts70 2014-09-12 21:51:51

如果你不希望按鈕來改變readonly輸入，您可以在jQuery選擇改成這樣：

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

JSFiddle

來源

2014-09-12 21:45:43 imtheman

您應該使用disabled而不是readonly.這在更新的小提琴中起作用。 http://jsfiddle.net/YD6PL/110/。這將阻止用戶選擇該框，以便他們不能改變它。不知道他們是否需要能夠突出顯示那裏的文字，但請先嚐試一下！

來源

2014-09-12 21:43:26 DerProgrammer

你的小提琴沒有更新 – 2014-09-12 21:46:27

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

回答

相關問題