例如我们在输入框输入文字时,如何监听input输入框内容的变化,然后根据内容的变化,我们去触发相应的事件。这个时候我们就应该给输入框input绑定三个事件,keypress,keydown,keyup。下面我将写一个demo来模仿搜索输入框中的差号的显示与隐藏。
style部分
body{
width: 100%;
height: 100%;
}
.input{
position: relative;
width: 300px;
height: 30px;
}
input{
width: 300px;
height: 30px;
border: none;
outline: none;
-webkit-appearance: none;
border: 1px solid red;
}
.cicle{
display: inline-block;
width: 20px;
height: 20px;
background: black;
border-radius: 10px;
position: absolute;
right: 10px;
top: 5px;
display: none;
}
html部分
<div class="input">
<input name="" rows="" cols="" id="text-area"placeholder="请输入文字"></input>
<span class="cicle"></span>
</div>
script部分
js原生绑定事件
window.onload = function() {
document.getElementById("text-area").addEventListener('keypress', function() {
calfontCount();
}, false);
document.getElementById("text-area").addEventListener('keydown', function() {
calfontCount();
}, false);
document.getElementById("text-area").addEventListener('keyup', function() {
calfontCount();
}, false);
}
jq写法
$(function() {
$("#text-area").bind("keypress", function() {
calfontCount();
});
$("#text-area").bind("keydown", function() {
calfontCount();
});
$("#text-area").bind("keyup", function() {
calfontCount();
});
})
用到的方法
function calfontCount() {
var textSpan = document.getElementById("textSpan");
var textArea = document.getElementById("text-area");
var cur = textArea.value.replace(/\s/g, '').length; //当前文字个数
if(cur > 0) {
$(".cicle").show();
} else {
$(".cicle").hide();
}
}
效果展示
![没有文字时](https://img-blog.csdn.net/20170401145221926?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjY0MjI3NDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)![有内容时](https://img-blog.csdn.net/20170401145302413?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjY0MjI3NDc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)