實時監聽輸入框值變化的完美方案:oninput & onpropertychange(真正完美,支援ie9以下,ie10,chrome)
引用地址:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
在 Web 開發中經常會碰到需要動態監聽輸入框值變化的情況,如果使用 onkeydown、onkeypress、onkeyup
這個幾個鍵盤事件來監測的話,監聽不了右鍵的複製、剪貼和貼上這些操作,處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案:結合 HTML5 標準事件
oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化。
oninput 是
從上面表格可以看出,oninput 事件在 IE9 以下版本不支援,需要使用 IE 特有的 onpropertychange 事件替代,這個事件在使用者介面改變或者使用指令碼直接修改內容兩種情況下都會觸發,有以下幾種情況:
- 修改了 input:checkbox 或者 input:radio 元素的選擇中狀態, checked 屬性發生變化。
- 修改了 input:text 或者 textarea 元素的值,value 屬性發生變化。
- 修改了 select 元素的選中項,selectedIndex 屬性發生變化。
在監聽到 onpropertychange 事件後,可以使用 event 的 propertyName 屬性來獲取發生變化的屬性名稱。
集合 oninput & onpropertychange 監聽輸入框內容變化的示例程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head>
<script
type= "text/javascript" >
//
Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput
(event) {
alert
( "The
new content: " +
event.target.value);
}
//
Internet Explorer
function OnPropChanged
(event) {
if (event.propertyName.toLowerCase
() == "value" )
{
alert
( "The
new content: " +
event.srcElement.value);
}
}
</script>
</head>
<body>
Please
modify the contents of the text field.
<input
type= "text" oninput= "OnInput
(event)" onpropertychange= "OnPropChanged
(event)" value= "Text
field" />
</body>
|
使用 jQuery 庫的話,只需要同時繫結 oninput 和 onpropertychange 兩個事件就可以了,示例程式碼如下:
1 2 3 |
$( 'textarea' ).bind( 'input
propertychange' , function ()
{
$( '.msg' ).html($( this ).val().length
+ '
characters' );
});
|
最後需要注意的是:oninput 和 onpropertychange 這兩個事件在 IE9 中都有個小BUG,那就是通過右鍵選單選單中的剪下和刪除命令刪除內容的時候不會觸發,而 IE 其他版本都是正常的,目前還沒有很好的解決方案。不過 oninput & onpropertychange 仍然是監聽輸入框值變化的最佳方案,如果大家有更好的方法,歡迎參與討論。
參考資料:
原創~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分隔線~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PS
如果你只看到這裡,那麼如果你的是IE10,或者chrome,仍然無法實時監聽控制元件內容,解決方案如下:
改變了文字框的值後,手動再觸發這2個事件:input和propertychange
這樣就能完美解決IE10和chrome下不觸發的問題了
$("#textarea").trigger("propertychange");針對chrome
$("#textarea").trigger("input");針對ie10
相關推薦
實時監聽輸入框值變化的完美方案:oninput & onpropertychange
ner 監聽 jpg number ima 方案 radio 技術 search oninput 是 HTML5 的標準事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過用戶界面發生
HTML5 oninput實時監聽輸入框值變化的完美方案
在網頁開發中經常會碰到需要動態監聽輸入框值變化的情況,如果使用 onkeydown、onkeypress、onkeyup 這個幾個鍵盤事件來監測的話,監聽不了右鍵的複製、剪貼和貼上這些操作,處理組合快捷鍵也很麻煩。因此這篇文章向大家介紹一種完美的解決方案:結合html5標準事
實時監聽輸入框值變化的完美方案:oninput & onpropertychange(真正完美,支援ie9以下,ie10,chrome)
引用地址:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html 在 Web 開發中經常會碰到需要動態監聽輸入框值變化的情況,如果使
js/jquery 實時監聽輸入框值變化的完美方案:oninput & onpropertychange
<script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) {
jquery實時監聽輸入框值變化
property per 並且 details dom 支持 觸發事件 java 不能 在做web開發時候很多時候都需要即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的用戶體驗感。而采用onchange時間又往往是在輸入框失去焦點(onblur)時候觸發,有時
實時監聽輸入框值變化:oninput & onpropertychange
需求:輸入名稱的時候,邊輸入邊自動顯示名稱的拼音碼和五筆碼 解決方案: 一開始想到使用onchange事件,但發現onchange需要失去焦點才觸發 於是上網查詢資料,知道oninput &
如何實時監聽輸入框的值?
想實現的效果:當輸入框的值為空時,查詢按鈕的顏色不改變,預設為灰色;當輸入值之後,查詢按鈕顏色改變。 簡單來說就是,想讓查詢按鈕的背景顏色根據文字框輸入的值動態變化。 想實現的效果圖: 未輸入時的狀態: 輸入完成時的效果: 問題描述:
監聽輸入框值的即時變化onpropertychange、oninput相容IE,Chrome,FF,Opera等
要達到的效果 很多情況下我們都會即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。比如即時顯示輸入框已經被輸入的位元組數,或者即時讀取輸入的值來進行搜尋引導,也就是google的關聯搜尋效果等。只要我們能捕獲即時事件就能做到很多事情。 需要
js監聽輸入框值的即時變化onpropertychange、oninput、onchange
要達到的效果很多情況下我們都會即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。比如即時顯示輸入框已經被輸入的位元組數,或者即時讀取輸入的值來進行搜尋引導,也就是google的關聯搜尋效果等。 只要我們能捕獲即時事件就能做到很多事情。 需要了解的知
js 實時監聽input中值變化
對象 不同 round 字符 實時 char div har 但是 摘自:http://blog.csdn.net/spy19881201/article/details/25537225 示例: <!DOCTYPE html> <html>
js監聽輸入框內容變化事件
如果你在實現“統計input、textarea文字框輸入字數”中遇到問題,閱讀本文或許可以幫助你解決這個棘手的問題! 手機頁面開發,要統計textareal文字框輸入字數,使用onkeyup雖然可以監聽到輸入框的文字字數變化,但在iphone下有個問題:
android EditText 實時監聽輸入框的內容
在開發中很多時候我們都會用到EditText,對輸入內容的實時監聽也是不可或缺的。 在android中為我們提供了TextWatcher這個類,我們只要extends這個類然後etColler.addTextChangedListener(editclick);就可以實時監
JS實時監聽輸入框中的內容
有時候我們需要實時監聽輸入框中值得變化,這裡得實時監聽是指當我們獲取到輸入框焦點,並在其中鍵入字元的時候,我們可以監聽到當每次鍵入字元後,獲取輸入框中的內容。如下圖 當在上邊的輸入框中每次輸
設定EditText的提示文字大小,監聽輸入框內容變化
我們經常會使用到EditText這個控制元件,然後在沒有輸入任何文字的時候,總會顯示hint提示文字,但是有的時候需要去改變這個提示文字的大小以及監聽輸入框的內容變化,以便顯示/隱藏輸入框後面的刪除文
Js/jQuery實時監聽input輸入框值變化
前言 在做web開發時候很多時候都需要即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的使用者體驗感。而採用onchange時間又往往是在輸入框失去焦點(onblur)時候觸發,有時候並不能滿足條件。 首先看一下dom中元素事件: onpr
監聽input、textarea輸入框值變化的知識
在document的input輸入框、textarea輸入框(不管是現在的元素還是將來要新增的元素)上面繫結input propertychange事件。 實時監聽輸入框值變化的完美方案:oninpu
JQuery 實時監聽文字框變化
文章目錄 JQuery 實時監聽文字框變化 html 的文字框 js 程式碼 JS 監聽長按事件 $(f
《Android開發卷——實時監聽文字框輸入》
在實際開發中,有時候會讓使用者釋出一些類似微博、說說的東西,但是這個是有限制長度的,除了在文字輸入框限制長度外,還要在旁邊有一條提示還能輸入多少個字的“友好提示”。 1、文字框限制輸入長度 2、安卓沒有提供文字域,這裡順便提一下如果把textview製作成文字域。
總結propertychange input監聽輸入框
常常會有輸入框檢查的需求,最常見的就是即時搜尋。 即時搜尋的三個方案: change事件 (1)change事件 發事件必須滿足兩個條件:當前物件屬性改變並且是由鍵盤或滑鼠事件激發的(指令碼觸發無效)當前物件失去焦點(onblur) keypress (2)keypress 能監聽鍵盤事
input實時監聽文字框內容
在做搜尋時經常會用到我們需要監聽input <input type="text" id="input"> $('#input').on('keydown',function(){ var val=$(this).val().trim(); c