<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<h3></h3>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 按住不松会一直触发keydown */
$('input').keydown(function(){
console.log('按下键盘时')
})
$('input').keyup(function(){
console.log('释放按键时')
})
/* keypress代表键盘敲击过程中产生的事件 */
但是键盘按下的时候触发,抬起不触发,一直按不送也会连续触发 */
$('input').keypress(function(){
console.log('产生可打印的字符时')
})
</script>
</body>
</html>
防抖:实现输入整个语句结束的时候,再打印向后台发送请求
let timer; //定义一个定时器
$('input').keyup(function () {
/* 思路:每次up抬起时先清除之前的定时器 */
clearTimeout(timer)
/* 每敲击一个字母都会执行下面的话 */
/* 定时器会产生一个唯一的id */
/* 每次都会根据唯一的id 把之前的定时器清空,所以就会以最后一次的抬起获取的val值为准 */
timer = setTimeout(function () {
console.log('把'+$('input').val()+'发送给后台')
}, 800)
})
如何解决定时器里面找不到当前匹配元素的this?
答:把当前能获取到input的this,用一个变量that存起来,在定时器里面使用这个变量that来调用。
/* this是谁调用就是谁的 */
let timer;
$('input').keyup(function(){
clearTimeout(timer)
let that = this;
timer = window.setTimeout(function(){
console.log($(that).val())
},500)
})
写一个input在里面输入字的时候可以实时显示再h3标签中,按1键把input里面输入的文字通过alert打印出来
$(document).keyup(function(e){
if(e.keyCode == 49){ //"1"的keyCode值为49,keyCode解释见下个例子
alert($('input').val())
}
})
$(document).keyup(function(e){
/* e代表事件源对象 */
/* 每一个按键都有对应的keyCode */
console.log(e);
if(e.keyCode=='13'){ //enter键的keyCode值为13
alert('提交成功!')
}
})