您的位置:首页技术文章
文章详情页

javascript - js输入框限定字数问题

【字号: 日期:2023-04-10 14:59:09浏览:46作者:猪猪

问题描述

js输入框限定输入框的字数,以下代码

<input type=’text’ onkeyup='checkNumber($(this))'>function checkNumber($this){ let val=$this.val(); if(val.length > 10 ){alert(’字数超过10’); }}

在实际过程中,发现以下问题,如图:javascript - js输入框限定字数问题

在输入法中是,先显示字母,再将字母拼音转换成汉字。故可能在输入的时候,字母加汉字已超过限定的字数,该如何解决?

问题解答

回答1:

<input type='text' maxlength='10'>回答2:

oninput='checkNumber($(this))'

回答3:

你不用alert,用输入框后面加红框的形式就可以了

回答4:

我们设想下,input也输入全英文的、或者中文,需要限定长度小于10,那么maxlength='10'是需要的,checkNumber函数然后判断是否input有存在中文,有的话判断最后字符是否是英文。如果没有中文说明说纯英文就提示,这样方案不足之处有中文和英文一起存在不好判断。

回答5:

下面这个例子,不知会不会帮到你

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>input 事件兼容处理以及中文输入法优化</title></head><body> <input type=’text’> <script>var input = document.querySelector(’input’);var isLock = false;//当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.input.addEventListener(’compositionstart’, function(){ isLock = true;})//当浏览器是直接的文字输入时, compositionend会以同步模式触发.input.addEventListener(’compositionend’, function(){ isLock = false;});input.addEventListener(’input’,function(e){ if(!isLock)console.log(this.value);}); </script></body></html>回答6:

onkeyup事件换成onblur事件解决。

标签: JavaScript
相关文章: