jQuery实现输入框提示，当获取焦点时提示消失，当失去焦点时内容为空则显示提示，否则保留输入信息...

可以使用jQuery的focus()和blur()方法，以及val()方法来实现输入框提示的效果。具体的代码如下：

HTML代码：

<input type="text" id="inputBox" value="请输入内容">

jQuery代码：

$(function() {
  var defaultValue = $('#inputBox').val(); // 获取输入框的默认值
  $('#inputBox').focus(function() {
    if ($(this).val() === defaultValue) {
      $(this).val(''); // 输入框获取焦点时，如果输入框的值等于默认值，则清空输入框
    }
  }).blur(function() {
    if ($(this).val() === '') {
      $(this).val(defaultValue); // 输入框失去焦点时，如果输入框的值为空，则显示默认值
    }
  });
});

在代码中，首先获取输入框的默认值，然后使用focus()方法和blur()方法分别对输入框获取焦点和失去焦点的事件进行处理。在获取焦点的事件处理函数中，如果输入框的值等于默认值，则清空输入框；在失去焦点的事件处理函数中，如果输入框的值为空，则显示默认值。这样就可以实现输入框提示的效果了。

相关问题

jquery 输入框获取焦点

通过使用jQuery可以实现输入框获取焦点的功能。在代码中，可以使用.focus()方法来设置输入框获取焦点，使用.blur()方法来设置输入框失去焦点。具体实现方式如下：

// 获取焦点
$("#username").focus(function(){
    var curValue = $(this).val();
    if(curValue == this.defaultValue){
        $(this).val("");
    }
});

// 失去焦点
$("#username").blur(function(){
    var curValue = $("#username").val();
    if($.trim(curValue) == ""){
        $(this).val(this.defaultValue);
    }
});

这段代码中，当用户名输入框获得焦点时，如果当前值等于默认值，则清空输入框的值。当失去焦点时，如果输入框的值为空，则将默认值重新填入输入框。

代码生成：使用jQuery完成：1.上下两个输入框，下面一个验证按钮 2.输入框获得焦点时改变输入框背景色（颜色自定义），失去焦点后恢复原颜色。 3.密码由数字和大写字母和小写字母三种中至少二种组成，长度为6至10位， 4.密码输入后以“*”号显示， 5.输入完成后输入框失去焦点时，用正则表达式进行判断密码形式是否满足要求，输入有误时在输入框后面显示输入密码类型或长度错误。 6.从二个文本框中输入密码一致时，用警告框提示验证通过，否则提示不通过； 7.验证三次密码不一致时，验证按钮禁用3分钟，3分钟之后解除禁止

以下是实现上述功能的 jQuery 代码：

$(document).ready(function() {
    var passwordInput = $('#passwordInput');
    var confirmPasswordInput = $('#confirmPasswordInput');
    var validateButton = $('#validateButton');
    var passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{6,10}$/; // 密码正则表达式
    var errorText = ''; // 错误信息

    // 输入框获取焦点时改变背景色
    passwordInput.focus(function() {
        $(this).css('background-color', '#dff0d8');
    });
    confirmPasswordInput.focus(function() {
        $(this).css('background-color', '#dff0d8');
    });

    // 输入框失去焦点时恢复原背景色
    passwordInput.blur(function() {
        $(this).css('background-color', '');
    });
    confirmPasswordInput.blur(function() {
        $(this).css('background-color', '');
    });

    // 密码输入框以“*”号显示
    passwordInput.keyup(function() {
        var password = $(this).val();
        var passwordLength = password.length;
        var passwordHidden = '';

        for (var i = 0; i < passwordLength; i++) {
            passwordHidden += '*';
        }

        $(this).val(passwordHidden);
    });

    // 验证密码长度和格式是否正确
    passwordInput.blur(function() {
        var password = $(this).val();

        if (!passwordRegex.test(password)) {
            errorText = '密码长度为6至10位，由数字和大小写字母中至少两种组成';
            $(this).after('<span class="error">' + errorText + '</span>');
        } else {
            $(this).next('.error').remove();
        }
    });

    // 验证两个密码输入框中的密码是否一致
    confirmPasswordInput.blur(function() {
        var confirmPassword = $(this).val();
        var password = passwordInput.val();

        if (confirmPassword !== password) {
            errorText = '两次输入的密码不一致';
            $(this).after('<span class="error">' + errorText + '</span>');
        } else {
            $(this).next('.error').remove();
        }
    });

    // 点击验证按钮进行密码验证
    validateButton.click(function() {
        var password = passwordInput.val();
        var confirmPassword = confirmPasswordInput.val();

        if (!passwordRegex.test(password)) {
            errorText = '密码长度为6至10位，由数字和大小写字母中至少两种组成';
            passwordInput.after('<span class="error">' + errorText + '</span>');
        } else {
            passwordInput.next('.error').remove();
        }

        if (confirmPassword !== password) {
            errorText = '两次输入的密码不一致';
            confirmPasswordInput.after('<span class="error">' + errorText + '</span>');
        } else {
            confirmPasswordInput.next('.error').remove();
        }

        // 验证三次密码不一致时禁用验证按钮3分钟
        if ($('.error').length >= 3) {
            validateButton.prop('disabled', true);
            setTimeout(function() {
                validateButton.prop('disabled', false);
            }, 180000);
        } else {
            alert('密码验证通过！');
        }
    });
});