附加 span 元素和 fadeOut jQuery

Question

我正在为只接受数字的输入字段开发验证函数。如果它不是一个数字，它应该附加一个带有消息的跨度："Only digits" 然后淡出。问题是输入字段和跨度都消失了。

如何使只有消息淡出？

</head>
<body id="test">
Number : <input type="text" title="numInput" name="quantity" id="quantity"   maxlength="8" />&nbsp;

</body>
</html>

jQuery

$(document).ready(function () {

$('input[title="numInput"]').keypress(function (e) {
 //if the letter is not digit then display error and don't type anything
 if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

var errmsg = "<span>Only digits</span>";

  $("#test").append(errmsg).show().fadeOut("slow");
           return false;
 }

 });
});

Answer 1

请尝试通过给 span 标签一个 id 来单独使用淡出，因为目前，它适用于 id 为 test 的元素。您也可以将输入类型数字用于数值。这是运行脚本。

var errmsg = "<span>Only digits</span>";
$("#test").append(errmsg);
document.getElementsByTagName("span")[0].setAttribute("id", "errorMsg");
setTimeout(function(){ $("#errorMsg").fadeOut("slow"); }, 3000);

Answer 2

$(document).ready(function() {

  $('input[title="numInput"]').keypress(function(e) {
    //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

      $(".error").fadeIn("slow").fadeOut("slow");
      return false;
    }

  });
});

.error{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="test">
  Number : <input type="text" title="numInput" name="quantity" id="quantity" maxlength="8" />&nbsp;
<span class="error">Only digits</span>
</body>

在html
将 class 添加到 span 然后将其隐藏在 CSS
然后做淡入淡出

$(document).ready(function() {

  $('input[title="numInput"]').keypress(function(e) {
    //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

      var errmsg = "<span id='spantoremove'>Only digits</span>";
      var thiscontext = $(this);

      $('#test').append(errmsg);
      setTimeout(function() {
        $("#spantoremove").remove()
      }, 3000);
      return false;
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="test">
  Number : <input type="text" title="numInput" name="quantity" id="quantity" maxlength="8" />&nbsp;
</body>

尝试使用 settimeout。
附加 settimeout 示例 3 秒后删除

Answer 3

试试这个：

$(document).ready(function () {

$('input[title="numInput"]').keypress(function (e) {
 //if the letter is not digit then display error and don't type anything
 if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

var errmsg = "<span>Only digits</span>";

  $("#test").append(errmsg);
  $(errmsg).fadeOut("slow");
           return false;
 }

 });
});



<div>
<div id="test">
Number : <input type="text" title="numInput" name="quantity" id="quantity"   maxlength="8" />&nbsp;

</div>
</div>

附加 span 元素和 fadeOut jQuery

append span element and fadeOut jQuery

html

javascript

jquery

fadeout