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的按钮覆盖文本

回答

相关问题