Home > Web Front-end > JS Tutorial > Real-time statistics on the number of words in the input box—about the use of onpropertychange and oninput_form effects

Real-time statistics on the number of words in the input box—about the use of onpropertychange and oninput_form effects

WBOY
Release: 2016-05-16 18:00:37
Original
893 people have browsed it

I saw events on the Internet that are very convenient for implementing this function:
onpropertychange in IE
oninput in non-IE
The advantage of using these two events is that when the content of the input box changes, the event is called using key Events related to mouse will be more complicated, and this method is as effective as the paste method. However, these two events will not occur when changing the input value using js.
Just add two event methods in the Chinese text box. (I saw on the Internet that the oninput method in non-ie needs to be bound with addEventListener, and element.oninput = function(){...} will not work, but I can do it in Firefox 6, but for the sake of safety, I still do it here Use the standard method element.addEventListener('input', function(){...}) to implement)
Use the element.attachEvent('onpropertychange', function(){...}) method in IE. However, because IE will determine that all attributes have changed, a lot of unnecessary work will occur, and sometimes problems will occur and functions cannot be called. So here I only judge when the value attribute changes (propertyName attribute of the event object) and call the method. The result is:
element.attachEvent('onpropertychange', function(){if(window.event.propertyName == "value"){...})

Copy code The code is as follows:

/*
Parameters:
length: maximum length
ele: input object
callBack : Callback method. The parameter len represents the number of bytes of the current input box content. This in the method points to ele.
autoFire: Automatically calls once for initialization
*/
function input_max(length, ele, showEle, callBack,autoFire){
if(ele.addEventListener){
ele.addEventListener('input', change, false);
}else{
ele.attachEvent('onpropertychange', function( ){if(window.event.propertyName == "value"){alert('a');change()}})
}
function change(){
var len = Math.ceil (byteLength(ele.value)/2);
len = len <= length ? len : length - len;
callBack.call(ele,showEle,len);
};
function byteLength(b) {
if (typeof b == "undefined") { return 0 }
var a = b.match(/[^x00-x80]/g);
return (b .length (!a ? 0 : a.length))
};
//Automatically call once
if(autoFire){change()};
};
// Callback Function
function input_max_callBack(showEle,len){
var note = showEle;
if (len >= 0 ){
note.innerHTML = len ;
this.style.borderColor = "";
this.style.backgroundColor = "";
}else{
note.innerHTML = "over" -len "this.style.backgroundColor = "#FFC";
this.style.borderColor = "#F00";
}
}
// Dynamic title
input_max (30, document.getElementById('news_title'), document.getElementById('news_title_limit'),input_max_callBack,true);
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template