Question

我想使用jQuery来检测表单字段和文本字段是否输入了3个或更多字符，如果是，我想隐藏背景图像。

目前我正在实现部分目标;将背景图像隐藏在focus上，但问题是在用户输入或选择等后，移动到不同的表单字段后，背景图像会重新出现..

input.required:focus { 
    background-image: none; 
}
textarea.required:focus { 
    background-image: none; 
}

Answer 1

javascript

$(document).ready(function () {
  $( "input, textarea" ).on( "change blur", function() {
    var inputValue = $( this ).val();
    if( inputValue .length > 3 ) {
      $( this ).addClass( "moreThan3" );
    } else {
      $( this ).removeClass( "moreThan3" );
    }
  });
});

css

input.moreThan3, input.required:focus { background-image: none; }
textarea.moreThan3, textarea.required:focus { background-image: none; }

Answer 2

RiccardoC's answer：

略有改善

$(document).ready(function () {
  $( "input textarea" ).on( "change blur", function() {
    var inputValue = $( this ).val();
    $( this ).toggleClass( "moreThan3", inputValue.length > 3 );
  });
});

Answer 3

也许这就是你在寻找......

＆＃13;

$(document).ready(function(){
	$('#form1').on('focus keypress keyup keydown click',function(){
		var changer = true;
		$('#form1').find('input[type=text],textarea').each(function(){
			if($(this).val().length<3){changer = false;}
		});
		if(changer){$('body').css('background-image','none');}
		else{$('body').css('background-image','url(image)');}
	});
});

＆＃13;

body{background-image:url('image');}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="text" />
<input type="text" />
<textarea></textarea>
<input type="text" />
</form>

＆＃13;

检测表单字段中是否包含3个或更多文本字符

3 个答案: