开发日志：js当文本框输入非中文字符时，提示只能输入中文并将非中文字符清空【兼容IE、FF，适用于当文本框内容改变就立刻触发事件的其他功能性需求】

最新推荐文章于 2024-06-11 20:51:54 发布

抓住梦想

最新推荐文章于 2024-06-11 20:51:54 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：开发日志

本文链接：https://blog.youkuaiyun.com/kaidishi/article/details/12653583

开发日志专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种方法，使得HTML中的文本框只能输入中文字符，并在用户输入非中文字符时进行提示并清除这些字符。通过使用onkeyup事件结合正则表达式实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需要实现一个功能，要求

1文本框只能输入中文

2输入非中文提示，并清空非中文字符

在实现过程中遇到了不少问题

首先，实现了将一个字符串中所有非中文字符清空的功能

obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,'');//只能输入中文，非中文字符替换为空

刚开始的时候想使用onchange事件，但发现只有当切换焦点的时候才触发事件，即我输入完【中文45ds】，还要移去鼠标的焦点才能触发事件，不符合需求

接着使用onpropertychange事件，虽然可以实现内容改变后就触发事件，但却与FF不兼容

后来改用了onKey事件，然后加一些逻辑判断实现了该功能

JavaScript代码：

<script  type="text/javascript">    

    function inputChinese(obj){
        var oldLeng=obj.value.length;//获取原文本内容的长度
        obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,'');//只能输入中文，非中文字符替换为空
        var newLeng=obj.value.length;//获取修改后的文本的长度
        if(oldLeng!=newLeng){//如果前后文本的长度不一样，说明输入了非中文字符
            alert("只能输入中文");
        }
    }
</script>

HTML代码：

<input  type="text" onkeyup="inputChinese(this)" onafterpaste="inputChinese(this)" />[只能输入中文，如果输入非中文，则将非中文字符除去，并提示]