韦德国际1946国际网址:js实时总括字数提示的文

作者: 韦德国际1946国际网址  发布:2019-06-01

须要:实时监察和控制文件输入框的篇幅,并加以限定

实时监督检查文本框输入字数的实例代码,文本框实例

须求:实时监督文件输入框的篇幅,并加以限定

韦德国际1946国际网址 1

1、实时监察和控制当前输入字数,直接运用onkeyup事件措施,给输入框加maxlength属性限制长度。如:

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

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

那时候已足以做到主旨的监察效用,存在的难点:当输入英文时寻常,但输入汉语时,监察和控制的数字会随拼音长度而改换。

贰、消除方法:

compositionstart 事件触发于壹段文字的输入以前(类似于 keydown 事件,不过该事件仅在若干可知字符的输入此前,而那么些可知字符的输入大概须求层层的键盘操作、语音识别可能点击输入法的备选词)。

韦德国际1946国际网址:js实时总括字数提示的文本框,js实时监控文本框输入字数的实例代码。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();
}

如上那篇实时监督文本框输入字数的实例代码就是小编分享给大家的全体内容了,希望能给大家一个参照,也盼望大家多多扶助帮客之家。

须要:实时监察文件输入框的字数,并加以限定 1、实时监督检查当前输入字数,直接行使...

友善想了弹指间应有是用JavaScript达成的,前几日把它做出来了。原理很简短便是依据文本框触发的onkeyup事件来获取当前文件框字符的长短,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件呈现出来就足以了。
效果图:
韦德国际1946国际网址 2
亲自去做代码:

原理相当粗略正是基于文本框触发的onkeyup事件来取妥帖前文件框字符的长度,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件展现出来就足以了。

韦德国际1946国际网址 3

enter

<html>
<head>
<title>enter</title>
<script language="javascript"> 
function keypress1() //text输入长度处理 
{
    var text1 = document.getElementById("mytext1").value;
    var len = 15 - text1.length;
    var show = "你还可以输入"   len   "个字";
    document.getElementById("name").innerText = show;
}

function keypress2() //textarea输入长度处理 
{
    var text1 = document.getElementById("myarea").value;
    var len; //记录剩余字符串的长度 
    if (text1.length >= 300) //textarea控件不能用maxlength属性,就通过这样显示输入字符数了 
    {
        document.getElementById("myarea").value = text1.substr(0, 300);
        len = 0;
    } else {
        len = 300 - text1.length;
    }
    var show = "你还可以输入"   len   "个字";
    document.getElementById("pinglun").innerText = show;
}
</script>
</head>
<body>
    <center>
        <div style="text-align:left;">
            <h3>昵称:</h3>
            <input type="text" id="mytext1" maxlength="15" onkeyup="keypress1()"/>
            <font color="gray"><label id="name">你还可以输入15个字</label></font>
            <h3>评论内容:</h3>
            <br>
            <textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onkeyup="keypress2()" onblur="keypress2()"></textarea>
            <font color="gray"><label id="pinglun">你还可以输入300个字</label></font>
        <div>
    </center>
</body>
</html>

一、实时监督当前输入字数,直接运用onkeyup事件措施,给输入框加maxlength属性限制长度。如:

昵称:

你还是可以输入一四个字

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


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

评价内容:

你还是能够输入300个字

[Ctrl A 全选 注:如需引进外部Js需刷新技巧推行]

那儿已可以产生大旨的监察和控制作用,存在的难点:当输入英文时平常,但输入汉语时,监察和控制的数字会随拼音长度而转换。

您可能感兴趣的篇章:

  • JavaScript输入框字数实时总结更新
  • JavaScript中执会考察计算局计Textarea字数并提示仍能输入的字符
  • Javascript落实字数总计
  • JavaScript兑现总计文本框Textarea字数巩固用户体验
  • js达成多行文本框总括剩余字数效率
  • js完毕textarea限制输入字数
  • JavaScript动态提示输入框输入字数的措施
  • js推断文本框剩余可输入字数的形式
  • JS调整文件框textarea输入字数限制的法子
  • JavaScript落到实处的仿新浪微博原生态输入字数即时检查功用【兼容IE6】

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:韦德国际1946国际网址:js实时总括字数提示的文

关键词: