React —> input标签输入中文的拼音时候会触发onChange事件解决_ui input中文输入快速触发onchage-程序员宅基地

技术标签: input  技术  onChange  移动端  

在React开发项目的过程中,避免不了会用到input标签(比如在登录、录入用户信息等界面),而使用input标签时候,为了体验限制只能输入数字、或者只能输入数字或者字母、或者只能输入英文等限制条件。
今天在这里记录一下在项目中遇到的一个问题,描述如下:
在做用户登录界面,用户登录名字可以是数字、字母或者是数字和字母的组合,在控制用户输入只能是数字或者字母的时候,用IOS的全键盘输入汉字,在还没有输入完成,输入的拼音就直接变成字母带入到input的value值中,代码如下:

、、、、、
onAccountChange(e){
    let value = e.target.value;
    value = value.replace(/[^\d/a-zA-Z]/g,'')
    this.setState({
    accountValue: value 
    })
}
、、、、、、
render() {
    return(
        <input type="password" value={this.state.accountValue} onChange={this.onAccountChange}/>
    )
}

原因: 在input的onChange中监听到input中输入的值的时候进行了正则的判断,而输入中文的拼音时候也会走onChange这个方法,到这个方法做正则的替换时候不知道现在输入的是拼音,直接当成字母来处理了,就出现了Ios全键盘输入拼音时候还没有选择汉字拼音就直接转化成了字母。
解决方法是使用compositionstart+compositionend+input来判断直接输入的还是非直接直接输入

co

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44481662/article/details/90256989

智能推荐

(转载)java synchronized详解-程序员宅基地

文章浏览阅读422次。java synchronized详解记下来,很重要。Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码。 一、当两个并发线程访问同一个对象object中的这个synchronized(this)同步代码块时,一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块..._java make synchronized invalid

Android 多种投屏神器(Vysor,Total Control,scrcpy )-程序员宅基地

文章浏览阅读1.9w次,点赞6次,收藏32次。一,Vysor1,Vysor特点及优点特点或者说优点:极强的跨平台性能,Mac、Windows、Linux系统上都可以用;免费;无需Android系统Root 即可玩转电脑控制Android 设备;2,官网https://www.vysor.io/3,使用3.1,Win客户端(建议使用)直接下载windows客户端安装,运行就可以使用,使用也很简单,可以通过局域网和数据线连接Android设备,然后实现投屏;3.2,Chrome浏览器3.2.1,从官网Download进入_total control

Java反射机制_object o3 = m; object o4 = n; system.out.println(o-程序员宅基地

文章浏览阅读144次。概念:在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性;这种动态获取信息以及动态调用对象方法的功能称为 Java 语言的反射机制。简单来说,反射机制指的是程序在运行时能够获取自身的信息。在 Java 中,只要给定类的名字,就可以通过反射机制来获得类的所有信息。类的加载机制:new 对象()1.JVM加载对象.class文件1.1JVM在硬盘找对象.class文件并读取到内存中1.2JVM自动创建..._object o3 = m; object o4 = n; system.out.println(o3 == o4)

NDK各个版本,待后续更新_android-ndk-r10e和ndk 29差别-程序员宅基地

文章浏览阅读414次。ndk_r15c (July 2017)Windows 32-bit :https://dl.google.com/android/repository/android-ndk-r15c-windows-x86.zipWindows 64-bit :https://dl.google.com/android/repository/android-ndk-r15c-windows-x86_64.zipMac OS X :https://dl.google.com/android/repositor_android-ndk-r10e和ndk 29差别

Linux常用命令—grep_linux命令+grep-程序员宅基地

文章浏览阅读4.1k次,点赞3次,收藏16次。简介grep命令(Global Regular Expression Print)是 Linux系统中一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来 。grep 是linux中最为常用的三大文本(awk,sed,grep)处理工具之一,所以有必要掌握其用法。grep家族总共有三个成员构成:grep、egrep、fgrep。使用格式grep [选项] ..._linux命令+grep

关于the selection cannot be run on any server错误的问题,如何快速的解决。-程序员宅基地

文章浏览阅读3.9w次,点赞29次,收藏121次。最近在导入外来项目时,遇到了一个难题,就是出现了图中的错误。the selection cannot be run on any server(无法在任何服务器上运行所选内容)这个错误的原因在于Dynamic Web Module 的版本与server不匹配。Dynamic Web Module的版本可以通过右键项目名-&gt;properties-&gt;Project Facets可以..._the selection cannot be run on any server

随便推点

Cookie,会话,令牌-程序员宅基地

文章浏览阅读804次。会话cookieAre you new to web-development, feeling confused with different Web Storage elements? 您是Web开发的新手,对不同的Web存储元素感到困惑吗? If yes, then you are at the right place This article will give you a brief e..._会话和令牌

Linux查找文本中指定字符的小技巧_linux查找指定字符后的数据-程序员宅基地

文章浏览阅读3.6k次。在Linux的vi编辑器中,如果要查看指定文件中的某项内容,由于内容过于庞大,可以打开vi编辑器后再打一个【/】,括号中间的字符,然后输入你要查找的字符这样就可以找到你需要的字符了,方便我们查看大容量的日志文件。_linux查找指定字符后的数据

编译chromium 总结_<includepath>$(includepath);$(dxsdk_dir)include</i-程序员宅基地

文章浏览阅读2.5k次。编译chromium 总结http://www.chromium.org/developers/how-tos/build-instructions-windows这是官网的详细地址,但我只用他的说明还不够 可以参考这篇文章http://blog.sina.com.cn/s/blog_41608ead0101578b.htmlwin7+vs2010+vs2010SP1+DIR_$(includepath);$(dxsdk_dir)include

Struts-笔记-2-程序员宅基地

文章浏览阅读61次。2 .搭建Struts开发环境 2.1 搭建环境l 导入jar 包。 Add Library 导入jar包 l 建立一个配置文件:struts-config.xml &lt...

【杭电oj】1872 - 稳定排序(结构体排序)_wygoj-程序员宅基地

文章浏览阅读695次。稳定排序Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 4632 Accepted Submission(s): 1802Problem Description大家都知道,快速排序是不稳定的排序方法。_wygoj

Java中 GC是什么_gc钱包是干嘛的?-程序员宅基地

文章浏览阅读2.3w次,点赞9次,收藏17次。Java GC(Garbage Collection,垃圾收集,垃圾回收)机制,是Java与C++/C的主要区别之一,在使用JAVA的时候,一般不需要专门编写内存回收和垃圾清理代 码。这是因为在Java虚拟机中,存在自动内存管理和垃圾清扫机制。电脑的内存大小的不变的,当我们使用对象的时候,如使用New关键字的时候,就会在内存中生产一个对象,但是我们在使用JAVA开发的时候,当一个对象使用完_gc钱包是干嘛的?

推荐文章

热门文章

相关标签