ホームページ > ウェブフロントエンド > jsチュートリアル > 入力ボックス内の単語数に関するリアルタイム統計 - onpropertychange 効果と oninput_form 効果の使用について

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

WBOY
リリース: 2016-05-16 18:00:37
オリジナル
899 人が閲覧しました

この関数を実装するのに非常に便利なイベントをインターネット上で見つけました。
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);
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート