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

Clearing a text input (if it's empty) when another text box is clicked - jQuery

本文关键字：文本 -jQuery 如果 另一个 清除 输入 单击      更新时间：2023-09-26

我有一个电子邮件文本框，其中包含文本"（非必需）"，直到用户单击它，此时它变为空白。如果用户在没有输入电子邮件地址（或任何内容）的情况下单击另一个文本框，文本框将恢复为包含（不必输入）。

这是我的：

$(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)');
       }
   });
});

我不明白为什么第二部分不能正常工作。任何帮助都会得到我一生对自己的奉献。永远

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

您必须使用$('#email').val().length而不是$('#email').text().length()

更改

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

至

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

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

  • 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)');
       }
   });
});
相关文章：