gpt4 book ai didi

javascript - 附加 span 元素和 fadeOut jQuery

转载 作者:行者123 更新时间:2023-11-28 01:00:30 25 4
gpt4 key购买 nike

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

如何让只有消息淡出?

</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;
}

});
});

最佳答案

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

  1. 在html中添加错误信息span
  2. 添加类到 span 然后在 CSS 中隐藏它
  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 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>

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

关于javascript - 附加 span 元素和 fadeOut jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42416778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com