刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo:
<div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> <h1>你输入了: {{name}}</h1> </div>
我就想着,使用jq/js怎么实现类似的效果,后来找找,发现使用propertychange可以实现。
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)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持北冥有鱼!
您可能感兴趣的文章:
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- 深入理解vue.js双向绑定的实现原理
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
- Vue.js每天必学之数据双向绑定
- 使用Object.defineProperty实现简单的js双向绑定
- 实例剖析AngularJS框架中数据的双向绑定运用
- 深入学习AngularJS中数据的双向绑定机制
- 轻松实现javascript数据双向绑定
- 浅谈angular.js中实现双向绑定的方法$watch $digest $apply