jQuery:在输入字段中输入文本时，不启用该按钮

jQuery: When entering text in input field, doesn't enable the button

本文关键字：输入 不启用 按钮 字段 jQuery 文本      更新时间：2023-09-26

我这里有一个jsfiddle。

jQuery 

$(function() {
    //var input = $('form :input[type="text"]')
    $('form :input[type="text"]').live('keyup', function() {
        $('form .create-playlist-button')
            .attr('disabled', $('form :input[type="text"]').val().length == 0);
    });
});

需要

  • 当我开始在文本框中输入数据时，应该启用创建。

  • 当我从文本框中删除所有文本时，应禁用创建。

我对jQuery很陌生，这个东西对我不起作用。

$('form :input[type="text"]').live('keyup', function() {
      var val = $.trim(this.value); // this.value is faster than $(this).val()
      $('form .create-playlist-button').prop('disabled', val.length == 0);
});

演示

在这里，我用.prop()而不是.attr()，根据jQuery文档.prop()应该使用。我还使用 .trim() 从值的开头和结尾删除空格。

<小时 />

关于您的代码

在代码中，您使用了两次$('form :input[type="text"]')，一次用于绑定事件，一次用于获取文本字段的值。但这不是必需的，因为在事件处理程序函数keyup this将引用keyup事件绑定的input元素。

如果您有时出于任何目的需要多次使用任何选择器，最好将其缓存在变量中并重用该变量。举个例子：

var input = $('form :input[type="text"]');
input.on('click', function() {
      alert( this.value );
      input.addClass('something');
});
<小时 />

如果对委托事件处理程序使用 .on() 而不是 .live() 会更好，因为.live()已被弃用。

您可以使用如下所示.on()：

$('form').on('keyup', ':input[type="text"]', function() {
   var val = $.trim(this.value);
   $('form .create-playlist-button').prop('disabled', val.length == 0);
});
<小时 />

注意

委托事件处理的.on()语法如下所示：

$(staticContainer).on( eventName, target, handlerFunction )

在这里，staticContainer指向在页面加载时属于 DOM 的元素，即它不是动态的，也是您要绑定事件的target容器。

<小时 />

只是为了更多，去这里

  • .prop（） vs .attr（）

  • http://forum.jquery.com/topic/whats-the-difference-between-jquery-attr-and-jquery-prop

更新：

$(function(){
    //var input = $('form :input[type="text"]')
    $('form :input[type="text"]').live('keyup',function(){   
            $(this).closest('form').find('.create-playlist-button').prop('disabled',$(this).val().length==0);
     });
});

在"keyup"处理程序中，您可以使用this（或$(this)通过jQuery使用它）来获取实际涉及的文本字段。我还更改了代码，以确保您找到正确的"同伴"按钮。它查找父元素链以查找封闭<form>，然后在该表单中找到按钮。

不推荐使用分配事件处理程序的方式。它应该是：

    $('form').on('keyup', ':input[type="text"]', function(){ ...

此外，如果您检查"按键"而不是"keyup"，您将修复按钮直到第二个字符才起作用的错误。

编辑 — 哦，还有一件事：您通常应该使用 .prop() 来更新属性，而不是.attr() 。 对于较新的jQuery API来说，这是一件令人困惑的事情，但是您需要使用.attr的时间很少见。不幸的是，在jQuery 1.6发布之前，有大量的旧教学材料被写回去。

你应该使用 .change（） 方法！

在里面做一个测试：

if ($(this).val().length > 0)
...
else
...

来了...使用您的原始小提琴：

http://jsfiddle.net/9kKXX/4/

只需要稍作更改。

$(function(){
//var input = $('form :input[type="text"]')
$('form :input[type="text"]').live('keyup',function(){   
        $('form .create-playlist-button').attr('disabled',$(this).val().length==0);
 });
 });

小提琴：http://jsfiddle.net/9kKXX/36/

相关文章：