JS如何获取用户输入的回车,空格等特殊字符

JavaScript07

JS如何获取用户输入的回车,空格等特殊字符,第1张

document.onkeydown=function(e){console.log(e.keyCode)}

监听键盘事件,回车是13,空格是32;

你可以复制上面的代码,按F12 粘贴进控制台,按键盘就可以看到每个键对应的code

基于element-ui

组件

开发的vue.js项目,

实现回车键发起搜索,和原生的input

标签使用方法不一样:

el-input

监听键盘按下状态

得用@keyup.enter.native,如果是非el-input

组件,可以直接用@keyup.enter

<el-input

placeholder="搜索"

icon="search"

v-model="input"

:on-icon-click="pchandleIconClick"

@keyup.enter.native="searchEnterFun">

</el-input>

<input

placeholder="搜索"

type="text"

@keyup.enter="searchEnterFun">

在methods方法集里,写上监听的方法,当获取的keyCode

为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值

searchEnterFun:function(e){

var

keyCode

=

window.event?

e.keyCode:e.which

//

console.log('回车搜索',keyCode,e)

if(keyCode

==

13

&&

this.input){

this.$router.push({path:'/Share?keywords='+this.input})

}

}

which

keyCode

属性提供了解决浏览器的兼容性的方法。

keyCode属性返回onkeypress事件触发的键的值的字符代码,或者

onkeydown

onkeyup

事件的键的代码

注意:

Firefox

中,keyCode

属性在

onkeypress

事件中是无效的

(返回

0)。浏览器兼容问题,可以一起使用

which

keyCode

属性来解决:

var

keyCode

=

window.event

?

e.keyCode:e.which

which

属性返回onkeypress事件触发的键的值的字符代码,或者

onkeydown

onkeyup

事件的键的代码

浏览器支持:谷歌、火狐、ie9、safari、欧朋

以上这篇vue.js项目

el-input

组件

监听回车键实现搜索功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:详解.vue文件中监听input输入事件(oninput)vue使用element-ui的el-input监听不了回车事件的解决方法vue点击input弹出带搜索键盘并监听该元素的方法

<script type="text/javascript" language=JavaScript charset="UTF-8">

document.onkeydown=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0]

if(e &&e.keyCode==27){ // 按 Esc

//要做的事情

}

if(e &&e.keyCode==113){ // 按 F2

//要做的事情

}

if(e &&e.keyCode==13){ // enter 键

//要做的事情

}

}

</script>

只要你定义了这些键的动作,你在浏览器里按下这些键就会响应,兼容目前所有浏览器。

我做了一个jsp页面,里面有个搜索的功能,搜索是一个放大镜模样的图片,我给了个链接去执行函数,具体代码是:<span onclick="_search()"><img src="images/search.gif"  border="0">现在用鼠标点这个搜索图片是没问题的

有搜索条件输入框不?

有的话就在输入框加上onkeypress="if (event.keyCode == 13) _search()"

没有的话就给body加上面这段