Question

我做了一个jquery＆＃34; checkcus（str）＆＃34;检查输入字段是否为空。如果我专注于输入字段并且它是空的，则输入的背景颜色应该变为红色。否则，它应该关注具有id＆＃34; nextInput＆＃34;的下一个输入字段。

function checkcus(str) {

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

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


         }

   }

这是输入字段的代码

另外，我不需要输入和检查最大长度，因为输入是＆＃39; name＆＃39;所以不应该限制字符。

<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的新手，我认为我的代码中存在一个问题，为什么它无法正常工作。

Answer 1

如果input元素为空，那么该字段的值将为空字符串（''），您正在检查它是否是字符串值'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

Answer 2

您只需检查输入的长度即可。自从用jQuery标记你的问题后，我也jQuery-fied你的例子：

$('#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'>

Answer 3

给 jQuery 一个镜头......

＆＃13;

$(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');
        }
    });
});

＆＃13;

<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">

＆＃13;

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

3 个答案: