Jquery實時監(jiān)聽input value的實例

更新時間：2017年01月26日 11:07:53 投稿：jingxian

下面小編就為大家?guī)硪黄狫query實時監(jiān)聽input value的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

實例如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body id="lia-body"> 
  <div class="lia-content"> 
    <div class="inputwrapper"> 
      <label><span>姓名：</span><input type="text" name="fullname"></label> 
      <div class="result"></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觸發(fā)事件必須滿足兩個條件：

1）當(dāng)前對象屬性改變，并且是由鍵盤或鼠標(biāo)事件激發(fā)的（腳本觸發(fā)無效）

2）當(dāng)前對象失去焦點(onblur)；

onpropertychange

只要當(dāng)前對象屬性發(fā)生改變，都會觸發(fā)事件，但是它是IE專屬的；

oninput是onpropertychange的非IE版本，支持firefox和opera等瀏覽器

但不同的是，它綁定于對象時，并非該對象所有屬性改變都能觸發(fā)事件，只有在對象的value值發(fā)生改變時才會生效。

這里我們用來監(jiān)聽input value的改變再好不過了。

以上這篇Jquery實時監(jiān)聽input value的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery+javascript編寫國籍控件
本文給大家分享一個自己編寫的使用jquery+javascript實現(xiàn)的國籍控件，效果非常不錯，這里推薦給大家。
2015-02-02
easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
這篇文章主要介紹了easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作,結(jié)合實例形式詳細(xì)分析了easyUI分頁過濾器對數(shù)據(jù)進行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2020-06-06
jquery實現(xiàn)表單獲取短信驗證碼代碼
本文主要分享了jquery實現(xiàn)表單獲取短信驗證碼的代碼。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
jquery cookie插件代碼類
jquery cookie插件代碼類，使用這個就可以方便的控制的cookie了，但感覺前提你已經(jīng)使用的jquery,否則那么大的js類，沒必要用的吧，可以查看腳本之家以前提高的代碼。
2009-05-05
Jquery插件編寫簡明教程
這篇文章主要介紹了Jquery插件編寫簡明教程,jquery插件開發(fā)實例,需要的朋友可以參考下
2014-03-03
完美解決jQuery 鼠標(biāo)快速滑過后,會執(zhí)行多次滑出的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery 鼠標(biāo)快速滑過后,會執(zhí)行多次滑出的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
jQuery代碼實現(xiàn)表格中點擊相應(yīng)行變色功能
對于一個表格，為了更好的用戶體驗度，需要把選中的表格項添加高亮，下面小編給大家介紹使用jquery實現(xiàn)表格中點擊相應(yīng)行變色功能的實例代碼，需要的朋友參考下
2016-05-05
jQuery中after的兩種用法實例
after() 方法在被選元素后插入指定的內(nèi)容
2013-07-07
Jquery 模擬用戶點擊超鏈接或者按鈕的方法
在Jquery中可以通過選中a標(biāo)簽使用trigger方法定義事件即可模擬用戶點擊超鏈接或者按鈕，感興趣的朋友操作下
2013-10-10
jquery ajax加載數(shù)據(jù)前臺渲染方式不用for遍歷的方法
今天小編就為大家分享一篇jquery ajax加載數(shù)據(jù)前臺渲染方式不用for遍歷的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08