JS怎么控制文本框输入的长度?

发布网友发布时间：2022-04-24 17:33

共2个回答

懂视网时间：2022-04-23 00:48

下面我就为大家分享一篇实时监控文本框输入字数的实例代码，具有很好的参考价值，希望对大家有所帮助。

需求：实时监控文本输入框的字数，并加以限制

1、实时监控当前输入字数，直接使用onkeyup事件方法，给输入框加maxlength属性限制长度。如：

<p>
 <textarea id="txt" maxlength="10"></textarea>
 <p><span id="txtNum">0</span>/10</p>
 </p>

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
 txtNum.textContent = txt.value.length;
 })

此时已可以完成基本的监控功能，存在的问题：当输入英文时正常，但输入中文时，监控的数字会随拼音长度而变化。

2、解决方法：

compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。

compositionend 就是对应的就是一段文字输入的事件。

这两个属性有点类似于“开关”，如：开始进行中文输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入一个或是一串文字后，开关关闭，得到监测的数值长度。

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false; //定义关闭的开关
 txt.addEventListener("keyup", function(){
 if(sw == false){
 countTxt();
 }
 });
 txt.addEventListener("compositionstart", function(){
 sw = true;
 });
 txt.addEventListener("compositionend", function(){
 sw = false;
 countTxt();
 });
 function countTxt(){ //计数函数
 if(sw == false){ //只有开关关闭时，才赋值
 txtNum.textContent = txt.value.length;
 }
 }

在vue中的写法：

template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>

data:

textContent: '',
conterNum: 0,
chnIpt: false,

methods:

write() {
 let self = this;
 if (self.chnIpt == false) {
 self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}

上面是我整理给大家的，希望今后会对大家有帮助。

使用axios封装fetch方法和调用

在JS中Map和ForEach的区别有哪些？

在vue中如何实现页面加载进度条组件

javascript该如何实现获取日期段内每天不同的价格

在vue中如何实现图片loading组件

为什么Node.js会成为Web应用开发？

在javascript中如何实现最长公共子序列

热心网友时间：2022-04-22 21:56

JS控制文本框输入的长度的方法如下：

1、html页面中有以下文本：
<input id="groupidtext" type="text" style="width: 100px;" maxlength="6" /></td>

2、用js*输入的最大长度的脚本如下：
$(function)
$('#groupidtext').on {'input', function(e) }

if(this.value.length === 6) { //如果输入长度等于6，则禁用输入}

$('input[type="submit"]').prop('disabled', false);
else
$('input[type="submit"]').prop('disabled', true);

js*文本框输入的长度为18位字符，只能是数字和字母，如果输入的字符超过18位就不能在输入了。

这个无需JS，用input text标签的maxlength属性即可实现。代码如下：

maxlength 属性后面设置需要*的字段最大长度即可。