首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从JS/ onChange事件中获取非字母数字键的值

从JS/onChange事件中获取非字母数字键的值,可以通过event对象的keyCode或者key属性来实现。

  1. 使用keyCode属性: 在JS中,可以通过event.keyCode属性来获取按下的键的键码值。非字母数字键的键码值通常是大于90的值,可以通过判断keyCode的值来确定是否为非字母数字键。

示例代码:

代码语言:txt
复制
function handleKeyPress(event) {
  var keyCode = event.keyCode || event.which;
  if (keyCode > 90) {
    console.log("非字母数字键的值:" + String.fromCharCode(keyCode));
  }
}
  1. 使用key属性: 在现代浏览器中,可以使用event.key属性来获取按下的键的值。非字母数字键的值通常是一个字符串,可以通过判断key的值来确定是否为非字母数字键。

示例代码:

代码语言:txt
复制
function handleKeyPress(event) {
  var key = event.key;
  if (key.length > 1) {
    console.log("非字母数字键的值:" + key);
  }
}

以上两种方法都可以在JS/onChange事件中获取非字母数字键的值。根据具体需求选择合适的方法来处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React组件基础

选择一:将所有组件放在同一个JS文件 选择二:将每个组件放到单独JS文件 组件作为一个独立个体,一般都会放到一个单独 JS 文件 实现方式 创建Hello.js 在 Hello.js...') } } 事件对象 可以通过事件处理程序参数获取事件对象 React 事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题 function...经常需要操作表单元素,比如获取表单或者是设置表单。...步骤 给表单元素添加name属性,名称与state属性名相同 根据表单元素类型获取对应事件处理程序通过[name]修改对应state class App extends React.Component...={this.handleChange}/> ) } } 受控组件 受控组件借助于ref,使用原生DOM方式来获取表单元素 使用步骤 调用React.createRef

3K20
  • 常见触发函数事件(实现不同用户体验)

    js时候都知道,函数是我们基本上面每天都在写一个东西,因为很多功能是需要函数来实现,没有函数很多效果是没办法实现,那么今天简单总结一下可以触发函数一些事件。...onclick //鼠标点击触发 应用场景:一般是button时候,可以点击地方会用到一个事件。 效果实现:鼠标点击完成一次时候触发。...效果实现:鼠标元素区域进入到该元素区域时候,但是离开时候是不会触发,而且在元素里面移动也是不触发,只有进入一瞬间会触发。...效果实现:将鼠标移动到该元素区域,这个时候按压键盘上任意键位,均可以触发,那么numlock如果关闭时候,数字键是不是可以呢?...onkeypress //键盘完成一次按压抬起触发 应用场景:实时获取键盘输入数据 效果实现:将鼠标移动到该元素上面,这个时候按压任意字母或者数字键均可以触发,那么numlock关闭时候呢?

    91520

    React Native组件篇(三) — TextInput组件

    TextInput是什么       文本输入框,相当于iOS我们熟悉UITextField,通过键盘输入并显示内容。       两者属性有很大相同之处,下面大家一起看一下。...characters:所有字符, words:每一个单词字母 sentences:每个句子字母(默认情况下) none:不会自动使用任何东西 autoCorrect 布尔型 如果为假,...bufferDelay 数值型 这个会帮助避免由于 JS 和原生文本输入之间竞态条件而丢失字符。默认应该是没问题,但是如果你每一个按键都操作非常缓慢,那么你可能想尝试增加这个。...布尔型 如果你真想要它表现成一个控制组件,你可以将它设置为真,但是按下按键,并且/或者缓慢打字,你可能会看到它闪烁,这取决于你如何处理 onChange 事件。...onBlur 函数 当文本输入是模糊,调用回调函数 onChange 函数 当文本输入文本发生变化时,调用回调函数 onFocus 函数 当输入文本是聚焦状态时,调用回调函数 returnKeyType

    2.2K20

    01-React基础(JSX, State, Refs, Props组件交互, Event, 生命周期)

    refsi = {} # 函数赋值 refsiCopy = nodeName => { return this.refsi[nodeName] = React.createRef() } # 使用, 自定义存储容器获取...console.log(event.target.value) } } 受控组件与受控组件 # 受控组件 直接挂在对象上, 而不是state, 所以是非受控组件 class Demo extends...this.setState({value: event.target.value}); } handleSubmit = (event) =>{ # 获取state..., 但是直接加(),会被渲染时候直接就执行掉,返回/undefined, 所以需要在执行函数, 返回一个函数, 来给React调用 名字:<input type="text"...// 依赖于 DOM 节点初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求好地方。

    1.1K30

    【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    ,现在我们只需要改变isHont就可以完成上面的需求了,那如何改变isHont呢?...React如何绑定事件 【复习】原生三种事件绑定方法都可以进行事件判定,React官方推荐使用函数式绑定。...即不受setState()控制,与传统HTML表单输入相似,input输入即显示最新。 在受控组件,可以使用一个ref来DOM获得表单。...受控组件更新state流程 1、 可以通过初始state设置表单默认 2、每当表单发生变化时,调用onChange事件处理器 3、事件处理器通过事件对象event拿到改变后状态,并更新组件...onChange事件来绑定对应事件 受控组件 受控组件不受状态控制 受控组件获取数据就是相当于操作DOM 受控组件可以很容易和第三方组件结合,更容易同时集成 React 和 React

    5K30

    JavaScript常见事件

    个: JavaScript键盘事件 方法 说明 onkeydown 按下键事件(包括数字键、功能键) onkeypress 按下键事件(只包含数字键) onkeyup 放开键事件...(包括数字键、功能键) 三个事件执行顺序如下:onkeydown -> onkeypress ->onkeyup。...3、表单事件 在JavaScript,常用表单事件有4种: JavaScript鼠标事件 事件 说明 onfocus 获取焦点事件 onblur 失去焦点事件 onchange...状态改变事件 onselect 选中文本事件 4、编辑事件 在JavaScript,常见编辑事件有3种: JavaScript编辑事件 方法 说明 oncopy 复制事件...5、页面相关事件 在JavaScript,常用页面相关事件有3种: JavaScript编辑事件 方法 说明 onload 页面加载事件 onresize 页面大小事件 onerror

    36610

    HTML事件属性--DOM

    研究html对象,事件和方法,js角度来思考,这个标签属性是通过什么方法,触发什么事件来实现 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发事件...} 13.onpopstate 当浏览器窗口记录改变时运行脚本, 14.onredo 当文档执行撤销时触发事件 二、form事件属性 由html表单内触发事件,通常使用在form元素 1.onblur...,当input失去焦点时候产生什么样效果 demo查看 2.onfocus 元素获得焦点时触发事件,和onblur相反 demo查看 3.onchange 当元素被改变时候触发事件 <input...} 这个事件意思就是,当我对input内容进行操作改变后,浏览器会弹出一个alert demo查看 4.oncontextmenu 当用户右键操作时触发该事件 可以绑定在任意元素触发...,一闪而过,只有alert能停留在页面上,等待点击确定 三、key键盘事件 1.onkeydown 按下任意键时触发,包括系统按钮,箭头和功能键 demo查看 2.onkeypress 按下任意字母数字键时触发

    3.8K20

    JavaScript 语言入门

    arguments 隐形参数 (只在 function 函数内 ) JS 自定义对象 自定义对象 Object 形式自定义对象 {} 花括号形式自定义对象 js 事件 onload 加载完成事件...onclick事件 onblur 失去焦点事件 onchange 内容发生改变事件 onsubmit 表单提交事件 DOM 模型 Document 对象 Document 对象方法介绍 节点常用属性和方法...null 空 NaN 全称是:Not a Number。数字。数值。...使用格式如下: function 函数名(形参列表){ 函数体 } 在 JavaScript 语言中,如何定义带有返回函数?...className 用于获取或设置标签 class 属性 innerHTML 属性,表示获取/设置起始标签和结束标签内容 innerText 属性,表示获取/设置起始标签和结束标签文本

    4.3K20

    04_使用JS完成功能

    1.使用JS完成表单校验 分析思路 1.确定使用事件onsubmit事件 2.书写函数 3.对输入项进行空判断 为表单绑定一个事件 <form action="#" method...("user"); //获取输入表单对象,对象调用属性value属性 就可以获取输入。...) 第三步:离焦事件绑定函数(获取用户输入内容进行判断) 第四步:如果失败,在span位置给出错误提示信息,如果成功,让span内容为空。...(time); } 4.JS事件 5.使用JS完成表格一个隔行换色 技术分析 新标签学习 </tr...onchange:当用户改变内容时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick),事件绑定到编号前面的复选框里面 获取编号前面的复选框状态

    3.9K60

    Web阶段:第三章:JavaScript语言

    函数类型: function javascript里特殊: undefined 未定义 所有未赋初始化变量,默认都是undefiend null 空 NAN not a number 数值...,数字(做非法算术运算时,就会返回NAN) JS定义变量格式: var 变量名; var 变量名 = ; 数组 数组定义方式 Js 数组定义: 格式: var 数组名 = []; // 定义一个空数组 var 数组名 = [ 1,2,3 ]; // 定义数组同时赋初始 ...格式如下: function 函数名(形参列表){ 函数体 } 如何访问函数: 函数名( 实参列表 ); 如何定义带有返回函数? 答:只需要在函数体内直接使用return语句返回即可。...,帮我验证一下,输入框内容是否合法 // 验证规则是:必须由字母,数字,下划线组成,并且长度是5到12位 // 1、绑定单击事件 function

    3.4K20

    分享5个关于 Vue 小知识,希望对你有所帮助

    大家好,今天分享几个和Vue相关小知识,希望对你有所帮助 1、在Vue.js获取下拉框选择 有时候,我们希望在Vue.js在选项改变时获取所选选项。...在这篇文章,我们将学习如何在Vue.js获取选择选项。 在Vue.js获取选择选项 我们可以通过将@change设置为一个方法来在Vue.js获取选择选项。...在onChange函数,我们获取事件对象,并使用event.target.value获取所选属性。...3、在Vue.js获取组件内元素 有时候,我们希望在Vue.js获取组件内元素。在本文中,我们将讨论如何在Vue.js获取组件内元素。...我们可以this.options.$filters属性获取过滤器函数来调用Vue组件实例过滤器。

    21630

    React Native 原生密码键盘插件

    这篇文章重点介绍原生密码键盘插件开发与使用 二:实现思路分析 原生密码键盘插件是需要实现自定以键盘包含数字、大写字母、小写字母、特殊字符四种切换方式,并且需要实现随机键盘和随机键盘模式。...新建数字键盘FBYNumKeyBord类,实现相应视图及功能 在数字键盘FBYNumKeyBord类,视图包含0-9数字按钮、ABC字母切换按钮、@%#特殊字符切换按钮、回删按钮、完成按钮和取消按钮。...新建字母键盘FBYWordKeyBord类,实现相应视图及功能 在数字键盘FBYWordKeyBord类,视图包含26个字母按钮、大小写切换按钮、123数字键盘切换按钮、@%#特殊字符切换按钮、回删按钮...新建符号键盘FBYSymbolKeyBord类,实现相应视图及功能 在数字键盘FBYSymbolKeyBord类,视图包含30种特殊字符按钮、123数字键盘切换按钮、ABC字母切换按钮、回删按钮、完成按钮和取消按钮...新建FBYCustomKeyBord类,实现键盘类型切换功能 FBYCustomKeyBord类根据JS调用键盘时传入参数,来实现何种键盘模式,实现键盘类型,共有6种类型:数字及字母字母及数字、数字及字母特殊字符

    2.5K20

    【整合】input标签JS改变Value事件处理方法

    阻塞在于失去焦点后才触发(输入过程不触发事件)   2、通过JS方法修改,修改后触发事件。...这样onpropertychange就对手工输入无效;   3、实现手工输入结束后要触发事件,使用onchange事件   1、其他浏览器也可以使用onchange模拟输入结束后触发事件,但是没法使用...适用场景为:输入内容失去焦点后,才触发事件场景       注:在查资料过程中看到有的地方说onchangeIE8以下浏览器中会实时监听文本变化,但是我在实际测试中发现并没有实时监听,此处有问题货错误还请指教...适用场景为:文本框输入过程实时监听输入内容,触发事件 onpropertychange:IE中元素特有的属性,直接在底层监听元素属性变化(不止是Value),任何变化都会触发事件,包括适用JS操作...      适用场景为:页面运行期间实时监听元素属性变化,触发事件,特别适用于在IEJS操作触发事件场景 后记:项目原需求实现其实最好是在控件里面更改,这里做了个奇怪东西~  权当学习 参考:

    12.2K50

    翻译 | 玩转 React 表单 —— 受控组件详解

    除了提供单独组件代码,我还将这些组件放进表单,方便你理解子组件如何更新父组件 state ,以及接下来父组件如何通过 props(单向数据流)更新子组件。...受控组件有两个特点: 受控组件提供方法,让我们在每次 onChange 事件发生时控制它们数据,而不是一次性地获取表单数据(例如用户点提交按钮时)。...这个单向循环 —— (数据)(1)子组件输入到(2)父组件 state,接着(3)通过 props 回到子组件,就是 React.js 应用架构单向数据流含义。...,这样一来我们就能拿到事件对象(译注:准确来说,应该是事件目标元素)。...2. handleFormSubmit 为了提交表单数据,我们 state 抽取需要提交属性,创建了一个对象。接着使用 AJAX 库或技术将这些数据发送给 API(本文不包含此类内容)。

    11.4K100

    Antd Form 实现机制解析

    只需要通过监听两个表单组件 onChange 事件获取表单项 value,根据定义校验规则对 value 进行检验,生成检验状态和检验信息,再通过 setState 驱动视图更新,展示组件以及校验信息即可...应该设为 checked getValueFromEvent 如何 event 获取组件 hidden 为 true 时,校验或者收集数据时会忽略这个字段 ?...,在事件回调,通过默认 getValueFromEvent 方法或者组件配置 getValueFromEvent 方法,可以参数 event 中正确拿到组件。...在子组件 Render 执行过程, getFieldDecorator 方法 fieldStore 读取实时表单数据以及校验信息,并通过注入 value 或者 valuePropName 设定属性来更新表单...Form 管理组件,只需要满足下面三个条件 提供受控属性 value 或其它与 valuePropName 同名属性 提供 onChange 事件或 trigger 同名事件 支持 ref

    2.7K20

    JavaScript基础系列

    命名规则: 字母,数字,下划线,美元符号,不能以数字开头 变量声明与赋值 使用var声明变量 省略var声明变量是全局变量,不过不推荐使用 JavaScript基础语法和JavaScript变量...parseFloat() number:表示整数和浮点数 如何与NaN操作都会返回NaN,与任何都不相等,包括本身。...isNaN(n),检测n是否是“数值”,返回是boolean parseInt():会忽略字符串前面的空格,直到找到第一个空格字符。...continue: 结束本次循环,继续开始下一次 JavaScript函数,作用,定义,调用 函数返回,通过return语句,实现返回。...插入 返回原始数组删除项 //删除 var delArr=arr.splice(2,0); //插入 var insertArr=arr.splice(3,0,"m","n",88); //替换

    2.6K50
    领券