javascript – jQuery模糊事件没有触发

我是jQuery的新手,所以我打赌我做错了什么,但我无法弄清楚为什么这个事件没有解雇.我有一个textarea元素,由于应用程序接受数据,因此在提交之前需要删除任何空格.当它失去焦点时,我试图在textarea中清理它,因此模糊方法.不幸的是,它似乎并没有在我的表格中触发.奇怪的部分是相同的代码在jsfiddle中工作,但仅在最初失去焦点时.对textarea的所有后续更改和失去焦点都不会触发事件.我还读到另一个答案,可能需要使用delegate()或.on()方法,但我不能100％确定如何正确地执行此操作.( jQuery blur() not working?)代码如下,任何建议都会有所帮助.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#comments").blur(function() {
    var txt = $("#comments").html();
    txt = txt.replace(/\n/g,' ');
    txt = txt.replace(/\s{3,}/g,' ');
    $("#comments").html($.trim(txt));
});

//$("#comments").trigger("blur"); added this to help fix the issue,but it didn't make a difference
});
</script>

HTML：
< textarea name =“comments”id =“comments”style =“width：100％; height：200px”>< / textarea>

这里是jsfiddle链接：http://jsfiddle.net/75JF6/17/

编辑：感谢所有快速回复.我已经调查了每个人的答案,并听取了你的意见.我有95％的路在那里,然而,仍然存在一个问题.切换到.val()方法而不是.html()是一种更好的方法,但是根据jQuery API,在textareas上调用此方法时会出现以下问题,其中解析了回车符.问题是我需要确保删除它们以验证该字段.

Note: At present,using .val() on textarea elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR however,carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:

$.valHooks.textarea = {
  get: function( elem ) {
  return elem.value.replace( /\r?\n/g,"\r\n" );
  }
};

正如我之前提到的,我是jQuery的新手,并且无法找到有关如何在google& amp;之间正确使用valHooks的更多信息.堆栈溢出.如果有人能就我原来的问题对此有所了解,我们将不胜感激.

解决方法

你的代码工作得非常好.

同时在提交按钮上附加click事件,因为单击按钮时不会发生模糊事件.你必须明确地让textarea失去焦点.

$(document).ready(function () {
    $("#comments").on('blur',trimText);
    $("input[type='submit']").on('click',function (e) {
        e.preventDefault();
        trimText();
        $("input[type='submit']").submit();
    });

    function trimText() {
        var txt = $("#comments").html();
        txt = txt.replace(/\n/g,' ');
        txt = txt.replace(/\s{3,' ');
        $("#comments").html($.trim(txt));
    }
});

Check Fiddle

原文地址：https://www.jb51.cc/jquery/149996.html