Question

我有一个电子邮件文本框，其中包含文本'（Not Required）'，直到用户点击它，此时它变为空白。我试图将其设置为如果用户单击另一个文本框而不输入电子邮件地址（或输入任何内容），文本框将恢复为包含（不需要）。

这就是我所拥有的：

$(document).ready(function () {

   $('#email').val("(Not Required)");

   // this part works fine
   $('#email').click(function(){
       if ($(this).val() == '(Not Required)'){
           $(this).val('');
       }
   });

   // this isn't working
   $(':text').click(function(){
       var em = $('#email').val().length();
       if (em<3){
           $('#email').val('(Not Required)');
       }
   });

});

我无法弄清楚为什么第二部分无法正常工作。任何帮助都将以非常大的方式给予我自己一生的奉献精神。永远。

Answer 1

您必须使用$('#email').val().length代替$('#email').text().length()

Answer 2

更改

$('#email').text().length();

到

$('#email').val().length;

只是一个建议，为什么不使用电子邮件输入的blur（）事件来返回“Not Required”文本而不是等待点击另一个输入框？

Answer 3

var em = $('#email').text().length();

应该是

var em = $('#email').val().length;

我用链式方法向你展示了一个更好的方法：

$(document).ready(function () {

    $('#email').val("(Not Required)").foucs(function() {
        $(this).val('');
    }).blur(function() {
        if ($(this).val().length < 3 ){
           $(this).val('(Not Required)');
        }
    });

});

Answer 4

click不是你应该抓住的事件。 focus是最佳选择。永远不会忘记键盘导航。
不要两次查询DOM，保存DOM元素并使用它。
使用val()代替text和长度而不是length()
:text不是一个好的选择器。它意味着全局选择器$('*')

$(document).ready(function () {
    var $email = $('#email');
    $email.val("(Not Required)");

   // this part works fine
   $email.focus(function(){
       if (this.value == '(Not Required)'){
           this.value ='';
       }
   });

   $('#otherTextBoxId').focus(function(){
       if ($email.val().length <3 ){
           $email.val('(Not Required)');
       }
   });

});

单击另一个文本框时清除文本输入（如果它为空） - jQuery

4 个答案: