入力ボックス内の単語数に関するリアルタイム統計 - onpropertychange 効果と oninput

入力ボックス内の単語数に関するリアルタイム統計 - onpropertychange 効果と oninput_form 効果の使用について

WBOY

リリース： 2016-05-16 18:00:37

オリジナル

894 人が閲覧しました

この関数を実装するのに非常に便利なイベントをインターネット上で見つけました。
IE の onpropertychange
非 IE の oninput
これら 2 つのイベントを使用する利点は、入力ボックスの内容が変更されたときに、イベントはキーを使用して呼び出されます。マウスに関連するイベントはより複雑になりますが、この方法は貼り付け方法と同じくらい効果的です。ただし、jsを使用して入力値を変更する場合、これら2つのイベントは発生しません。
中国語のテキストボックスに 2 つのイベントメソッドを追加するだけです。 (インターネットで見たところ、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"){...})

コードをコピーコードは次のとおりです:

 
/* 
パラメータ: 
length: 最大長
ele: 入力オブジェクト
callBack : コールバック メソッド。パラメータ len は現在の入力ボックスの内容のバイト数を表します。
autoFire: 初期化のために 1 回自動的に呼び出します。 input_max(length, ele, showEle, callBack,autoFire){ 
if(ele.addEventListener){ 
ele.addEventListener('input', change, false); 
ele. attachEvent('onpropertychange', function( ){if(window.event.propertyName == "value"){alert('a');change()}}) 
} 
function change(){ 
var len = Math.ceil (byteLength(ele.value)/2); 
len = len }; 
 function byteLength(b) { 
if (typeof b == "未定義") { return 0 } 
var a = b.match(/[^x00-x80]/g) ); 
return (b .length (!a ? 0 : a.length)) 
} // 自動的に 1 回呼び出す 
if(autoFire) 
; }; 
// コールバック関数 
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);