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實現(xiàn)的國籍控件，效果非常不錯，這里推薦給大家。2015-02-02
easyUI使用分頁過濾器對數(shù)據(jù)進(jìn)行分頁操作實例分析
這篇文章主要介紹了easyUI使用分頁過濾器對數(shù)據(jù)進(jìn)行分頁操作,結(jié)合實例形式詳細(xì)分析了easyUI分頁過濾器對數(shù)據(jù)進(jìn)行分頁操作具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
本文主要分享了jquery實現(xiàn)表單獲取短信驗證碼的代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
jquery cookie插件代碼類，使用這個就可以方便的控制的cookie了，但感覺前提你已經(jīng)使用的jquery,否則那么大的js類，沒必要用的吧，可以查看腳本之家以前提高的代碼。2009-05-05
這篇文章主要介紹了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
after() 方法在被選元素后插入指定的內(nèi)容2013-07-07
在Jquery中可以通過選中a標(biāo)簽使用trigger方法定義事件即可模擬用戶點擊超鏈接或者按鈕，感興趣的朋友操作下2013-10-10
jquery ajax加載數(shù)據(jù)前臺渲染方式 不用for遍歷的方法
今天小編就為大家分享一篇jquery ajax加載數(shù)據(jù)前臺渲染方式 不用for遍歷的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08