Question

我正在尝试创建一个简单的表单来更改颜色或以某种方式显示已编辑（无论如何）编辑而不是保存/提交 - 不是在更改期间，而是在之后。说我有这个小形式，只是为了使它具体：

<form action="" id="contact-form" class="form-horizontal">
  <fieldset>    
    <div class="control-group">
      <label class="control-label" for="message">Message</label>
        <div class="controls">
          <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
        </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn">Submit</button>
      <button type="reset" class="btn">Cancel</button>
    </div>
  </fieldset>
</form>

对不起，我没有任何启动JS显示，我不知道如何从头开始编写函数，我不知道在网上搜索什么，找到一些我可以调整的代码。 / p>

谢谢！

编辑：如果您已将内容放入框中，我希望显示更改，但如果您在进行多次更改后最终删除它，我希望该指示消失，就像您没有更改任何内容一样。我不希望它在页面刷新后继续工作（宁愿它只是恢复到原始状态）。

Answer 1

为此，您可以使用keyup事件。

试试这个：

$('textarea').keyup(function () { // on keyup
  // change the color!
}

这样，您可以在textarea上发生keyup事件时管理元素的CSS属性！

更多信息：

http://api.jquery.com/css/ jQuery CSS

http://api.jquery.com/keyup/ jQuery KeyUp事件！

Answer 2

您可以使用：

$('#contact-form').change(function () {
alert('Message has changed');
});

而不是alert()，您可以执行任何所需的操作，例如，这只是。

JSFiddle

Answer 3

你可以这样做：

$('#contact-form :input').on('input propertychange', function() {
    console.log('Edited!'); 
});

:input可帮助您选择表单中的所有input，textarea，select和button元素。

oninput可帮助您跟踪输入字段的更改时间

propertychange与oninput事件相同，但对不支持oninput

的旧版IE有用

Demo

Answer 4

您可以绑定输入属性更改，该更改适用于在其他

中粘贴数据的键盘

$('#message').on('input propertychange', function() {
    $(this).css('background-color', 'blue'); // or whatever you want to do
});

哦和shoutout到this question，因为我前一段时间看了这个并使用了这个答案

Answer 5

检查此解决方案，看看这是否是您要找的：

http://jsfiddle.net/TffNf/2/

$(function(){
    var oldval = $('#message').val();

    $('#message').keyup(function () { 

        $('.edit-msg').remove();
        if($('#message').val() != oldval)
        {
          $(this).after('<span class="edit-msg">This message is edited.</span>')
        }
    });
})

*

你如何使用jQuery来显示文本框或表单已被编辑？

5 个答案: