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

Detect if 3 text characters or more in form field

本文关键字：文本 字符 3个 表单 字段 是否 检测      更新时间：2023-09-26

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

目前我正在实现部分目标；在focus上隐藏背景图像，但问题是，在用户键入或选择etc并移动到不同的表单字段后，背景图像再次出现。。

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

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

RiccardoC的答案略有改进：

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

也许这就是你想要的。。

$(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)');}
	});
});
body{background-image:url('image');}
<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>

相关文章：