在学习过程中遇到的一个问题,关于解决拼音回改变文本域value.length的问题。
文本域的长度当然是使用 value值来获取当前长度,并且利用onmouseup事件监听。
<div>
<textarea id="txt" maxlength="10"></textarea>
<p><span id="num">0</span>/10</p>
</div>
var txt = document.getElementById("txt");
var num = document.getElementById("num");
txt.addEventListener("keyup", function(){
num.innerHTML = txt.value.length;
})
到目前其实已经实现了对文本长度的实时监控,但是在测试的时候发现,打出拼音时,拼音会被默认的算成文本长度。
于是经过一番搜索,找到了一个事件和具体的解决方法
解决方法:
compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。
compositionend 就是对应的就是一段文字输入的事件。
这两个属性有点类似于“开关”,如:开始进行中文输入的拼音时开关打开,不在改变监测得到的长度数值,完整输入一个或是一串文字后,开关关闭,得到监测的数值长度。
var txt = document.getElementById("txt");
var num = document.getElementById("num");
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){ //只有开关关闭时,才赋值
num.innerHTML = txt.value.length;
}
}