javascript - 当 readonly 为 true 时触发 TextBox 的 onchange 事件

Question

我正在尝试更改只读文本框的一些功能。但是，当我尝试使用 javascript 更新文本框时，文本框不会触发更改事件。

<script type="text/javascript">
        $(document).ready(function () {
            $('input[id$=_txtTest]').bind("change", function () {
                alert("test");
            });
                        });
        function ChangeText() {
            $('input[id$=_txtTest]').val('hello');
         }
    </script>

我在单击按钮时调用 ChangeText 方法。但它不会触发文本框的 textchange 事件。

谁能告诉我这里有什么问题？

Answer 1

那么你必须这样做：http: //jsfiddle.net/kmvSV/1/

 $(document).ready(function () {
   $('input[id$=_txtTest]').bind("change", function () {
     alert($(this).val());
   });
   $('button').bind("click", function () {
     $('input[id$=_txtTest]').val('hello').trigger('change');
   });
 });

Answer 2

更改事件仅由真实用户事件触发，而不是 javascript 操作。

您可以触发更改事件，如下所示：

$('input[id$=_txtTest]').val('hello').change();

Answer 3

你可以这样做

function setValueOfTextBox()
{
    var myElement = document.getElementById("textboxid");
    myElement.value = "hello";
    //following code fire change event for you text box
    if (myElement.onchange) 
         myElement.onchange();
}

Answer 4

我相信出于某种安全原因，这些事件不会被触发。但是您可以通过触发该元素上的特定事件来实现这一点。例如$('input[id$=_txtTest]').trigger('change');

我希望这可以帮助别人。

Answer 5

onkeypress事件或其他几个事件之一：

由于只读字段并没有真正改变；该onChange事件不会触发它。然而; 您还可以收听其他几个事件。

这是一个简短的演示：

input {
  font-size: 16px;
  line-height: 30px;
  padding: 3px;
  border: 2px darkblue solid;
}

<script>
function sayHi(evt) {

  alert('Are you tyring to edit a read-only? Click OK for details.')
  alert(JSON.stringify({
    keyCode: evt.keyCode, 
    charCode: evt.charCode, 
    altKey:evt.altKey, 
    ctrlKey: evt.ctrlKey, 
    shiftKey: 
    evt.shiftKey
  }), null, 2);
}
</script>



<input onkeypress="sayHi(event);" readonly placeholder="A readonly field..." />