突出显示输入字段'当用户开始打字时

Make highlighted input field 'unhighlighted' when user starts typing

本文关键字：用户 开始 显示 输入 字段      更新时间：2023-09-26

我用javascript做了一个简单的表单，如果你点击"join"按钮并留下一个空白字段，它会突出显示红色字段。

即使填好了，直到"Join"按钮被按下，它也会一直保持红色。因此，我希望在用户开始输入时取消高亮，而不是点击。

JSFiddle:http://jsfiddle.net/LCBradley3k/xqcJS/6/Javascript: 

$(document).ready(function(){

      /*  setTimeout(function(){ 
        $('.inputs').show("slide", { direction: "down" }, 1000);
        }, 2000);
    });*/
    $('#join').click(function(){
        var correct = true;
        $('input[type="text"]').each(function(indx){
            var $currentField = $(this);
            if ($currentField.val() === ''){
                $currentField.addClass('empty');
                correct = false;
            } else{
                $currentField.removeClass('empty');
            }
        });
        if (correct) {
            $('#answer').html('Thank You!');
            setTimeout(function(){
        $('.inputs').hide("slide", { direction: "up" }, 1000);
        }, 2000);
        } else {
        $('#answer').html('Please fill highlighted fields.') ;     
        }

    });

在表单输入上添加keyup处理程序以删除类:

$('input[type="text"]').keyup(function (event) {
    var $currentField = $(this);
    if ($currentField.val() !== '') {
        $currentField.removeClass('empty');
    }
});

当然可以，只要按下键。

http://jsfiddle.net/xqcJS/7/

if ($currentField.val() === ''){
    $currentField.addClass('empty');
    correct = false;
    $currentField.one('keydown',function(){
        $currentField.removeClass('empty');
    });

$('input[type="text"]').keydown(function() {
    if ( $(this).val != "" )
        $(this).removeClass('empty');
});

你可以使用focus或者keyup。

$('input[type="text"]').keyup(function(e){
  $(this).removeClass('empty');
})

如果你想使用焦点，你可以将keyup替换为focus，因为它不会在每次输入时触发事件。

添加以下代码:

$('input[type="text"]').focus(function() {            
   $(this).removeClass('empty');
});

类'empty'将被删除，当你聚焦在一个字段。

相关文章：