陕西省建设工程造价管理协会网站,做个页面多少钱,成都到西安需要隔离吗,汕头建站平台一、常见的键盘事件
onkeydown 某个键盘按键被按下onkeypress 某个键盘按键被按下onkeyup 某个键盘按键被松开 二、事件的执行顺序 onkeydown、onkeypress、onkeyup
down 事件先发生#xff1b;press 发生在文本被输入#xff1b;up …一、常见的键盘事件
onkeydown 某个键盘按键被按下onkeypress 某个键盘按键被按下onkeyup 某个键盘按键被松开 二、事件的执行顺序 onkeydown、onkeypress、onkeyup
down 事件先发生press 发生在文本被输入up 发生在文本输入完成
怎么区分onkeydown onkeypress实际开发中并没有对这2个有严格的区分。
onkeydown 更侧重于按键动作本身而 onkeypress 更注重实际字符的输入。如果你关心的是按键操作如游戏控制或键盘快捷键onkeydown 比较合适如果你需要识别用户输入的文字onkeypress 更适合。
onkeypress有可能按下键后没有松手我自己理解press中文翻译是按压代表还有压力嘛所以有可能还没有松手他会一直执行 onkeydown、onkeypress事件。 三、我们可以通过key和code来区分按下的键
code“按键代码“KeyA”“ArrowLeft”等 特定于键盘上按键的物理位置。key字符“A” “a”等对于非字符non-character的按键通常具有与code相同的值。
那怎么获取
答event.key, event.code
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typetextscriptvar inputEl document.querySelector(input)inputEl.onkeydown function () {console.log(keydown);}inputEl.onkeypress function () {console.log(onkeypress);}inputEl.onkeyup function (event) {console.log(onkeyup, event.key, event.code);}/script/body/html 四、实战演练
需求1点击按钮进行搜索。
需求2敲我们的enter键也能触发搜索。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typetextbutton搜索/buttonscriptvar inputEl document.querySelector(input)var btnEl document.querySelector(button)// inputEl.onkeydown function () {// console.log(keydown);// }// inputEl.onkeypress function () {// console.log(onkeypress);// }// inputEl.onkeyup function (event) {// console.log(onkeyup, event.key, event.code);// }// 点击按钮进行搜索btnEl.onclick function () {console.log(进行搜索, inputEl.value);}inputEl.onkeyup function () {if (event.key Enter) {console.log(进行搜索, inputEl.value);}}/script/body/html 需求3我按个s键获取输入框的焦点。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typetextbutton搜索/buttonscriptvar inputEl document.querySelector(input)var btnEl document.querySelector(button)// inputEl.onkeydown function () {// console.log(keydown);// }// inputEl.onkeypress function () {// console.log(onkeypress);// }// inputEl.onkeyup function (event) {// console.log(onkeyup, event.key, event.code);// }// 点击按钮进行搜索btnEl.onclick function () {console.log(进行搜索, inputEl.value);}inputEl.onkeyup function (event) {if (event.key Enter) {console.log(进行搜索, inputEl.value);}}// 按个s键自动获取输入框的焦点。document.onkeyup function (event) {if (event.code KeyS) {console.log(用户点击了s);inputEl.focus()}}/script/body/html
