ホームページ >ウェブフロントエンド >jsチュートリアル >Jqueryの入力値をリアルタイムに監視する例
Jqueryの入力値をリアルタイムに監視する例
- 高洛峰オリジナル
- 2017-02-03 14:12:211706ブラウズ
例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="lia-body">
<div>
<div>
<label><span>姓名：</span><input type="text" name="fullname"></label>
<div></div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
var $inputwrapper = $('#lia-body .lia-content .inputwrapper');
$inputwrapper.find('input').on('input propertychange',function(){
var result = $(this).val();
console.log(result);
$inputwrapper.find('.result').html(result);
});
})
</script>
</body>
</html>onchange トリガー イベントは 2 つの条件を満たす必要があります:
1) 現在のオブジェクトのプロパティが変更され、キーボードまたはマウス イベントによってトリガーされる (スクリプト トリガーは無効です)
2)現在のオブジェクトはフォーカスを失います (onblur) ;
onpropertychange
現在のオブジェクトのプロパティが変更される限り、イベントはトリガーされますが、これは IE 専用です。
oninput は onpropertychange の非 IE バージョンであり、次のようなブラウザーをサポートします。 Firefox や Opera と同じ
しかし、違いは、オブジェクトによって決定される場合、オブジェクトのすべてのプロパティ変更がイベントをトリガーできるわけではなく、オブジェクトの値が変更された場合にのみ有効になることです。
これは、入力値の変化を監視するのに最適な場所です。
上記の Jquery 入力値をリアルタイムで監視する例は、エディターによって共有されたすべての内容です。参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。
Jquery の入力値のリアルタイム監視に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。