onpropertychange 및 oninput_form 효과 사용에 대한 입력 상자의 단어 수에 대한 실시간 통계

이 기능을 구현하는 데 매우 편리한 이벤트를 인터넷에서 보았습니다.
IE의 onpropertychange
비 IE의 oninput
이 두 이벤트를 사용하면 입력 상자의 내용이 변경될 때, 키를 사용하여 이벤트를 호출합니다. 마우스와 관련된 이벤트는 더 복잡해지며 이 방법은 붙여넣기 방법만큼 효과적입니다. 단, js를 이용하여 입력값을 변경하는 경우에는 이 두 가지 이벤트가 발생하지 않습니다.
중국어 텍스트 상자에 두 가지 이벤트 메소드를 추가하면 됩니다. (인터넷에서 non-ie의 oninput 메소드가 addEventListener와 바인딩되어야 하고 element.oninput = function(){...}이 작동하지 않는다는 것을 보았지만 Firefox 6에서는 할 수 있지만 안전을 위해 여전히 여기서 수행합니다. 표준 메서드 element.addEventListener('input', function(){...})를 사용하여 구현)
element.attachEvent('onpropertychange', function(){ 사용 ...}) IE의 메서드입니다. 하지만 IE에서는 모든 속성이 변경된 것으로 판단하기 때문에 불필요한 작업이 많이 발생하고 때로는 문제가 발생하여 함수를 호출할 수 없는 경우도 있습니다. 그래서 여기서는 value 속성(이벤트 객체의 propertyName 속성)이 변경되는 시기만 판단하고 메서드를 호출합니다. 결과는 다음과 같습니다.
element.attachEvent('onpropertychange', function(){if(window.event.propertyName == "value"){...})

코드 복사 코드는 다음과 같습니다.

/*
매개변수:
길이: 최대 길이
ele: 입력 객체
callBack: 매개변수 len은 현재 입력 상자 내용의 바이트 수를 나타냅니다.
autoFire: 초기화를 위해 자동으로 한 번 호출합니다.
*/
함수 input_max(length, ele, showEle, callBack,autoFire){
if(ele.addEventListener){
ele.addEventListener('input', 변경, false)
}else{
ele. attachmentEvent('onpropertychange', function( ){if(window.event.propertyName == "value"){alert('a');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 == "undefine") { return 0 }
var a = b.match(/[^x00-x80]/g );
return (b .length (!a ? 0 : a.length))
}
//자동으로 한 번 호출
if(autoFire){change()}; };
// 콜백 함수
function input_max_callBack(showEle,len){
var note = showEle;
if (len >= 0 ){
note.innerHTML = len
this.style.borderColor = "";
this.style.BackgroundColor = "";
}else{
note.innerHTML = " " -len "this.style.BackgroundColor = "#FFC";
this.style.borderColor = "#F00";
}
}
// 동적 제목
input_max (30, document.getElementById('news_title'), document.getElementById('news_title_limit'),input_max_callBack,true)