如何使用 JavaScript 选择输入值空而不为空？答案

【问题标题】：How to select input Value empty and not empty using JavaScript?如何使用 JavaScript 选择输入值空而不为空？
【发布时间】：2018-01-26 04:56:56
【问题描述】：

点击提交按钮后如何选择input:empty和input:not(:empty)值并添加以下条件：

如果值为空，点击后改变背景颜色。

（正如您在 输入 Text3 中看到的那样，它不起作用）
如果值不为空，点击后添加这三个条件：

（在我的示例代码中不起作用）

• {光标：不允许；} • 只读 • 更改背景颜色

这是我的示例代码：

		$(".signupbtn").on('click', function() {
		    $("input").filter(function() {
		        return this.value.length !== 0;
		    }).val("Successfully Received!");
		    $("input:empty")
		        .css("background", "rgb(255,220,200)");

		    $("input:not(:empty)").style.cursor = "not-allowed";
		    $("input:not(:empty)")
		        .css("background", "rgb(220,20,60)");
		})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<form action="" method="POST" onsubmit="return false;">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
	<button type="submit" class="signupbtn">Sign Up</button>
	</form>

【问题讨论】：

您已经在正确使用.css。现在阅读控制台中的错误并更正它。

标签： javascript jquery

【解决方案1】：

这是您的代码稍作修改的版本。首先选择所有带有type of text 的input 标签，然后看看他们的length is 0 or not 是否适用于你想要的。

$(".signupbtn").on('click', function() {
   $('input:text').each(function(){
   
      if($(this).val().length == 0 ){
        $(this).css("background", "red");
      }else{
        $(this).val("Successfully Received!");
        $(this).css("background", "green");
        $(this).css("cursor","not-allowed");
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
	<button type="submit" class="signupbtn">Sign Up</button>
</form>

【讨论】：

谢谢Andam，先选择所有输入标签的好方法。谢谢你的建议。

【解决方案2】：

		$(".signupbtn").on('click', function() {
		    $("input").filter(function() {
		        return this.value.length !== 0;
		    }).val("Successfully Received!");
		    $("input:empty")
		        .css("background", "rgb(255,220,200)");

		    $("input:not(:empty)").css("cursor","not-allowed");
		    $("input:not(:empty)")
		        .css("background", "rgb(220,20,60)");
		})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<form action="" method="POST" onsubmit="return false;">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="">
	<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
	<button type="submit" class="signupbtn">Sign Up</button>
	</form>

【讨论】：