Question

我正在学习一些Javascript，我将其合并到另一个项目中。我有一些输入字段，其中DEPRECATION: ember-cli-babel 5.x has been deprecated. Please upgrade to at least ember-cli-babel 6.6. Version 5.2.8 located: frontend -> ember-crumbly -> ember-cli-babel设置为20.它们目前通过CSS设置了边框：

maxlength

当用户达到.textInput:focus { border: 2px solid green; }限制时，我希望输入字段的边框变为红色 - 这部分我已经实现了：

maxlength

但是，如果用户要删除某些文字或退格，我希望边框返回绿色。有人可以给我一些关于如何做到这一点的指示吗？

如果这是一种更有效的方式来实现我目前所拥有的，请告诉我。我觉得我的方法有点笨重，如果它在if语句中，则不需要给元素ID两次，这适用于有问题的元素ID。

干杯，

杰克

Answer 1

我实际上会这样做：

$(function() {
  $("#newsTitle").keydown(function() {
      $(this).toggleClass('invalid', $(this).val().length >= 20);
  });
});

.textInput:focus {
  border: 2px solid green;
}

.textInput.invalid,
.textInput.invalid:focus {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="textInput" id="newsTitle">

Answer 2

＆＃13;

$("#newsTitle").keypress(function() {
  if($(this).val().length == 20) {
      $(this)[0].style.borderColor = "red";    
  } else {
      $(this)[0].style.borderColor = "green";
  }
});

＆＃13;

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

＆＃13;

Answer 3

您可以尝试此代码

if (!isset($_SESSION['qno'])) {
    // first call (no session exists): get first question
    $_SESSION['qno'] = 1;
} else if (isset($_POST['next'])) {
    // click on next button: increase question ID by 1
    $_SESSION['qno']++;
}
// neither first init nor next button: page load with existing session

$("#newsTitle").keypress(function() {

  if($(this).val().length >= 20) {
   $(this).removeClass("valid");
      $(this).addClass("invalid");  
  } else {
    $(this).addClass("valid");
    $(this).removeClass("invalid");
  }
});

.invalid {
   border: 2px solid red;
}

.valid {
   border: 2px solid green;
}

用于更改输入边框颜色的Javascript代码

3 个答案: