jquery,js簡單實(shí)現(xiàn)類似Angular.js雙向綁定
剛了解了下Angular.js,發(fā)現(xiàn)Angular.js綁定數(shù)據(jù)方面非常方便,套下教程demo:
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你輸入了: {{name}}</h1> </div>
我就想著,使用jq/js怎么實(shí)現(xiàn)類似的效果,后來找找,發(fā)現(xiàn)使用propertychange可以實(shí)現(xiàn)。
JQ:
<div class="wrap"> <textarea></textarea> <div class="miss"></div> </div>
$('textarea').on('input propertychange', function() { $('.miss').html($(this).val().length + "~"+$(this).val()); });
JS:
var txt = document.querySelector("textarea"), msg = document.querySelector(".miss"); //不兼容IE8 以下 txt.addEventListener("input",function () { msg.innerHTML = this.value + "~"+this.value.length; },false)
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
- Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
- Vue.js單向綁定和雙向綁定實(shí)例分析
- Vue.js 踩坑記之雙向綁定
- js最簡單的雙向綁定實(shí)例講解
- JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
- AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解
- 使用Object.defineProperty實(shí)現(xiàn)簡單的js雙向綁定
- 輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
用jquery實(shí)現(xiàn)點(diǎn)擊欄目背景色改變
用jquery如何實(shí)現(xiàn)點(diǎn)擊一欄目實(shí)現(xiàn)欄目變色,再點(diǎn)擊另一欄目也變色,但原來的變回原色,本文提供解決方法,需要了解的朋友可以參考下2012-12-12jQuery實(shí)現(xiàn)自動滾動到頁面頂端的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動滾動到頁面頂端的方法,涉及jQuery針對頁面操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery中add實(shí)現(xiàn)同時選擇兩個id對象
jquery同時選擇兩個id對象的時候,可以用add來實(shí)現(xiàn)。2010-10-10用jquery等比例控制圖片寬高的具體實(shí)現(xiàn)
控制圖片寬高的方法有很多,下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友可以學(xué)習(xí)下2014-01-01jQuery實(shí)現(xiàn)左右兩個列表框的內(nèi)容相互移動功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右兩個列表框的內(nèi)容相互移動功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01jquery輪播的實(shí)現(xiàn)方式 附完整實(shí)例
這篇文章主要介紹了jquery輪播的實(shí)現(xiàn)方式,文中分享了jQuery輪播完整實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07js制作帶有遮罩彈出層實(shí)現(xiàn)登錄注冊表單特效代碼分享
這篇文章主要為大家詳細(xì)介紹了js制作帶有遮罩彈出層實(shí)現(xiàn)登錄注冊表單代碼特效,推薦給大家,有需要的小伙伴可以參考下。2015-09-09