文档章节

关于中文输入法下 输入框的实时监听 校验

rikkilovelife
 rikkilovelife
发布于 2014/11/04 16:02
字数 709
阅读 117
收藏 0

有个地方需要做中英文输入的即时校验。

大致思路就是监听鼠标的keyup事件,用正则去校验下。

当input要求英文的时候是可以的,但是在中文输入的时候keyup就失效了。

然后就费解了。。。

找了些资料,发现,原来老外是拉丁语系啊没有中文输入法这一说啊,可以google自动补全神码的业工作好好啊,怎么回事呢。。

经过尝试,大致思路是监听输入框的鼠标焦点事件,每隔一段时间正则检验一下。~~

直接贴码:

$(function () {
$("#chinese-name1").bind('focus',filter_time);  //绑定获取焦点事件
})    

filter_time = function(){
    var time = setInterval(regular_expression, 1000);  //失去焦点的时候清楚定时器
        $(this).bind('blur',function(){  
            clearInterval(time);  
        });  
};    

regular_expression = function(){
    $("#chinese-name1").val($("#chinese-name1").val().replace(/[^\u4E00-\u9FA5]/g,''));//正则匹配textarea值只能是中文
}

另:

 先在‘<input>’ 里输入

     onkeyup="value=value.replace(/[^\X]/g,'')"

然后在(/[\X]/g,'')里的 X 换成你想输入的代码就可以了,

中文u4E00-u9FA5,数字0-9,英文a-z\A-Z,其它符号@、点或其它 符号。也可以多个,用\隔开就行了。

例如:中英文 + 数字 + @符号 + 点符号   \a-\z\A-\Z0-9\u4E00-\u9FA5\@\.


若想在文本框里不能右键弹出菜单和不能粘贴进复制的信息的话

就要在'<input>'里输入 onpaste="return false" oncontextmenu="return false;"



JS 控制文本框只能输入数字
<input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')">

JS 控制文本框只能输入数字、小数点
<input onkeyup="value=value.replace(/[^\0-9\.]/g,'')" onpaste="value=value.replace(/[^\0-9\.]/g,'')" oncontextmenu = "value=value.replace(/[^\0-9\.]/g,'')">

JS 控制文本框只能输入英文
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z]/g,'')">

JS 控制文本框只能输入英文、数字
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">

JS 控制文本框只能输入中文
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

JS 控制文本框只能输入中文、英文、数字
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">

JS 控制文本框只能输入中文、英文、数字、空格
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">

JS 控制文本框只能输入中文、英文、数字、小数点
<input onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">

© 著作权归作者所有

rikkilovelife
粉丝 1
博文 23
码字总数 11842
作品 0
杭州
网页/平面设计
私信 提问
Java实现文本编辑时基于拼音输入的补全原型

续前文Java实现"命令式"简易文本编辑器原型. 效果如下: 所在源码库同上文, 尚未和上文的编辑器右侧的命令区集成. 代码由How to show autocomplete as I type in JTextArea?修改得来. 基本功能...

吴烜
04/03
0
0
拜读及分析Element源码-input组件篇

element-ui源码详细分析以及在其中可以学到的东西整理。(有问题欢迎指正与讨论 也可以来小站逛逛) 首先看生命周期做了什么 外层DIV绑定的一些class 插槽及一些props传入的参数控制外层样式 ...

hollyDysania
2018/09/10
0
0
在几何画板中如何打出乘法符号

c 方法一、借助中文输入法 首先选择文字工具,然后在需要输入乘号的地方按住左键拖拽出一个文本输入框,将输入法改为QQ拼音输入法(也可以是别的中文输入法,这里只是举例),输入乘号的拼音...

学术研究软件
2016/04/11
42
0
[vue] 表单输入格式化,中文输入法异常

v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。当控件是输入框时,v-model 监听其 input 事件。如下所示,这两种写法有什么区别吗? ...

张跃迁不想说话
2018/05/30
0
0
百度PC输入法曝光:内置搜索功能 存不兼容现象

图为:百度输入法官网截图 图为:百度中文输入法界面 9月6日凌晨消息,百度中文输入法PC版(以下称百度中文输入法)悄然曝光。在这个测试版本中,使用了与百度日语输入法类似的界面设计,并在输...

红薯
2010/09/06
713
8

没有更多内容

加载失败,请刷新页面

加载更多

谁说多功能和低价格不能兼得?Aspose系列产品1024购买指南请查收!

你还在为了Word、Excel、PDF、CAD等文档格式转换而发愁吗? 你是否在寻找一款能够在应用程序中文档管理的工具呢? Aspose——支持100多种文件格式创建、编辑、转换和打印! 往下看,找一找哪...

mnrssj
刚刚
0
0
hbase客户端API

本章介绍用于对HBase表上执行CRUD操作的HBase Java客户端API。 HBase是用Java编写的,并具有Java原生API。因此,它提供了编程访问数据操纵语言(DML)。 HBaseConfiguration类 添加 HBase 的配...

水木星辰
1分钟前
0
0
[插件化开发] 1. 初识OSGI

初识 OSGI 背景 当前product是以solution的方式进行售卖,但是随着公司业务规模的快速夸张,随之而来的是新客户的产品开发,老客户的产品维护,升级以及修改bug,团队的效能明显下降,为了解...

IsaacZhang
1分钟前
0
0
Webstorm 环境使用 nuxt.js 做开发,@ 和 ~ 别名配置

好的IDE + 好的代码提示 = 高效率的开发 webstorm 设置@和~别名,有助于代码查看和跳转. step 0 在项目下创建一个webpack.config.js,内容如下: const path = require('path')module.exp...

皇虫
5分钟前
0
0
Knative 实战:基于 Knative Serverless 技术实现天气服务-下篇

上一期我们介绍了如何基于 Knative Serverless 技术实现天气服务-上篇,首先我们先来回顾一下上篇介绍的内容: 通过高德天气 API 接口,每隔 3 个小时定时发送定时事件,将国内城市未来 3 天...

Mr_zebra
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部