用于检查输入值的 jquery 不起作用答案

【问题标题】：jquery for checking input value doesn't work用于检查输入值的 jquery 不起作用
【发布时间】：2015-03-26 02:49:10
【问题描述】：

我做了一个 jquery "checkcus(str)" 来检查输入字段是否为空。如果我专注于输入字段并且它是空的，则输入的背景颜色应该变为红色。否则，它应该关注 id 为“nextInput”的下一个输入字段。

function checkcus(str) {

   var i = document.getElementById(str).value;
   if( i === 'null' ) {
          document.getElementById(str).style.backgroundColor="red";

   }
   else {
         $('#nextInput').focus();


         }

   }

这是我的输入字段代码

另外，我不需要输入和检查最大长度，因为输入是“名称”，所以应该没有字符限制。

<div id='input1'>
 Name <input type = 'text' id = 'firstInput' onfocus='checkcus(this.id)'>
  </div>
<div id = 'input2'>
 Code <input type = 'text' id = 'nextInput'>
</div>

我是 jquery 的新手，我认为我的代码有问题，为什么它不起作用。

【问题讨论】：

附注，如果你使用的是 jQuery，那么使用 jQuery。例如。而不是document.getElementById(str).style.backgroundColor="red"; 做$('#'+str).css('backgroundColor','red')

标签： jquery focus

【解决方案1】：

您可以只检查输入的长度。自从你用 jQuery 标记了你的问题后，我也用 jQuery 验证了你的例子：

$('#firstInput').focus(function () {
    if ($(this).val().length ===0) {
        $(this).css('backgroundColor','red');
    } else {
        $('#nextInput').focus();
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Name
<input type='text' id='firstInput'>Code
<input type='text' id='nextInput'>

【讨论】：

【解决方案2】：

如果输入元素为空，则该字段的值将是一个空字符串（''），您正在检查它是否是一个字符串值'null'，它与null 值不同也。

function checkcus(str) {
    var el = document.getElementById(str);
    if (el.value === '') {
        el.style.backgroundColor = "red";
    } else {
        document.getElementById('nextInput').focus();
    }
}

演示：Fiddle

由于您使用的是 jQuery，因此请使用 jQuery 事件处理程序

Name<input type='text' id='firstInput'/>
Code<input type='text' id='nextInput'>

然后

jQuery(function($){
    $('#firstInput').focus(function(){
        if(this.value===''){
            $(this).css('background-color', 'red');
        }else{
            $('#nextInput').focus();
        }
    })
})

演示：Fiddle

【讨论】：

谢谢，它有效。但我还有另一个问题。我将两个放在不同的
标签中，但它不起作用。这是为什么？像这样：
Name

代码
@makarov 你能编辑上面的小提琴来重现问题吗
问题可能是你有重复的ID，一个元素的ID必须是唯一的......
非常感谢！我知道现在有什么问题。你是对的，我有两个相同的 ID，这就是为什么它对我不起作用。谢谢@Arun

【解决方案3】：

试一试jQuery ...

$(function() {
    $('#firstInput').on('focusin', function() {
       if( this.value.trim() === '' ) {
           $(this).css('background-color','#ff0000');
       } else {
           $('#nextInput').focus();
       }
    })
    .on('input',function() {
        if( this.value.trim() !== '' ) {
            $(this).css('background-color','#ffffff');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Name <input type="text" id="firstInput" name="firstInput">
Code <input type="text" id="nextInput" name="nextInput">

【讨论】：