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

Question

我有一个电子邮件文本框，其中包含文本“（不需要）”，直到用户单击它为止，此时它变为空白。 我试图将其设置为如果用户在不输入电子邮件地址（或输入任何内容）的情况下单击另一个文本框，则该文本框将恢复为包含（不需要）。

这是我所拥有的：

$(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（）事件返回“不需要”文本，而不是等待单击另一个输入框？

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代替od 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)');
       }
   });

});