javascript - 通过javascript从只读文本区域获取更改值

Question

我有一个 readonly 文本区域，它的值不断变化。现在我希望页面不断更新它的值并返回结果是否与提供的字符串匹配。这是我尝试过的方法，但它不起作用

var string = "This is my house";

    $('#textarea').bind('input', function() { 

    if ($(this).val() === string.trim()) {
        $('#message').html('matching').css('color', 'green');       
    } else $('#message').html('not matching').css('color', 'red');
});

Answer 1

我认为你不能监听 input 事件，因为文本区域是 readonly，你可以做的是触发 input - 或任何其他事件- 在更改文本区域的文本内容的同一代码中使用 .trigger()

JS Fiddle

var string = "This is my house", ta = $('#textarea'), msg = $('#message'),
    newContent = 'just dummy text'; // replacement text, change it to see the result

ta.on('input', function() {
  if ($(this).val() === string.trim()) { msg.html('matching').css('color', 'green'); } 
  else { msg.html('not matching').css('color', 'red'); }
});

$('#btn').on('click', function() {
  ta.text(newContent).trigger('input'); // trigger input event as text content is changed
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btn">Change it</button><br>
<textarea readonly name="" id="textarea" cols="30" rows="5">This is my house</textarea>
<hr><div id="message"></div>