jQuery模糊事件没有触发

时间:2013-09-09 17:10:29

标签: javascript jquery html forms textarea

我是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,在textarea上调用此方法时会出现以下问题,其中解析了回车符出。问题是我需要确保删除它们以验证该字段。

  

注意:目前,在textarea元素上使用.val()会从浏览器报告的值中删除回车符。但是,当通过XHR将此值发送到服务器时,将保留回车符(或由不包含原始值的浏览器添加回车符)。可以使用valHook实现此问题的解决方法,如下所示:

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

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

7 个答案:

答案 0 :(得分:4)

你的代码工作得很好。

同时在提交按钮上附加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,}/g, ' ');
        $("#comments").html($.trim(txt));
    }
});

<强> Check Fiddle

答案 1 :(得分:3)

不需要向元素添加delegate()或on(),只有在动态添加,删除等等时才需要它,但尝试不会有任何损失。

对于您的示例,请替换:
$("#comments").blur(function() {
附:
$(document).on("blur","#comments",function() {

另外,如果在控制台中出错,你可以通过chrome / firefox / safari / etc等开发者工具查看吗?

答案 2 :(得分:2)

你很亲密。 jQuery中的on()事件可能是您可以使用的资源最多的工具之一,但几乎没有什么不同的方法来标记它。

$("#comments").on({
    'blur' : function() {
        // your magic here
    }
});
$("#comments").trigger("blur");

我分叉你的jsFiddle以获得你的工作。 http://jsfiddle.net/75JF6/33/你很亲密,走在正确的轨道上。将on()事件视为向任何事件添加回调功能。我希望有所帮助!

答案 3 :(得分:1)

正确方法:http://jsfiddle.net/75JF6/35/

$(document).ready(function() {
    $("textarea#comments").on('blur',function() {
        var txt = $(this).val();
        txt.replace(/\n/g, ' ');
        txt = txt.replace(/\s{3,}/g, ' ');
        $(this).val($.trim(txt));
    });
});

val()应该用于表单输入元素,textarea也不例外。

答案 4 :(得分:0)

适用于val()而不是html()

我认为这是因为html值不会更新DOM树的实际内容

$(document).ready(function() {
    $("#comments").blur(function() {

        var txt = $("#comments").val();

        txt = txt.replace(/\n/g, ' ');
        txt = txt.replace(/\s{3,}/g, ' ');

        $("#comments").val($.trim(txt));
});
});

答案 5 :(得分:0)

仅在DOM准备好后附加目标元素时使用On,delegate或Live。

你可以使用keyup来做同样的事情,除了它在每次按键时都会触发。 当用户在键入后等待300毫秒时,将触发以下代码。它会比模糊事件更快。

var ClearInterValHandel;
var interval = 300 //in milisecond.

$("#comments").keyup(function(){
ClearTimeOut(ClearInterValHandel);

ClearInterValHandel = SetTimeout(trimText, interval);    
});

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

答案 6 :(得分:0)

来自@Sushanth和@Eez的答案以及一些其他研究的结合使我得到了这个问题的正确答案。感谢您的投入,这使我走上了正确的道路。我将把这个答案设置为社区维基。

将检索方法从.html()更改为.val()以及使用.on()功能都解决了我遇到的问题。由于表单字段"#comments"textarea,因此它在jQuery API中遇到了一个已知问题:http://api.jquery.com/val/

以下是实际解决问题的代码:

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


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

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


});

如果有兴趣的话,我再次将@ Sushanth - &#39; s jsFiddle分成所有这些信息:http://jsfiddle.net/B3y4T/