div實(shí)現(xiàn)自適應(yīng)高度的textarea實(shí)現(xiàn)angular雙向綁定

更新時(shí)間：2017年01月08日 10:26:49 作者：miaowwwww

本文主要介紹了div實(shí)現(xiàn)自適應(yīng)高度的textarea，實(shí)現(xiàn)angular雙向綁定的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧

相信不少同學(xué)模擬過騰訊的QQ做一個(gè)聊天應(yīng)用，至少我是其中一個(gè)。

過程中我遇到的一個(gè)問題就是QQ輸入框，自適應(yīng)高度，最高高度為3row。

如果你也像我一樣打算使用textarea，那么很抱歉，你一開始就錯(cuò)了。

textarea不是不可以的，然后我是這樣錯(cuò)的。（就是監(jiān)聽scroll 如果出現(xiàn)了，就增加1rows 的高度）然而這樣真的很挫

 textarea.bind('change','keydown'){
 if(scrollTop > 0 ) {
 textarea.rows += 1
 }
}

正確的打開方式應(yīng)該是利用 html5 全局屬性,然而在ios 移動端中，僅使用contenteditable，是無法獲得焦點(diǎn)的，無法進(jìn)行輸入的，因此需要添加use-select屬性

<div contenteditable='true' style='-webkit-use-select:text'></div>　　
//不同瀏覽器，支持度，和實(shí)現(xiàn)方式也有點(diǎn)不一樣，android和ios默認(rèn)webkit內(nèi)核，所以使用這個(gè)夠了

在angular中使用可編輯的div：——》 angular的ng-model指令只用于select，input，textarea，不適用于div，所以要進(jìn)一步封裝

/*
* 可編輯的div
* 應(yīng)用于發(fā)表評論中有表情的時(shí)候，div中添加img（表情）
* <div contenteditable strp-br='true' style='-webkit-use-select:text'></div>
*/
app.directive('contenteditable', function() {
 return {
 restrict: 'A', 
 require: '?ngModel', 
 link: function(scope, element, attrs, ngModel) {
 if (!ngModel) return; 
 ngModel.$render = function() {
 element.html(ngModel.$viewValue || '');
 };
 element.on('blur keyup change', function() {
 scope.$evalAsync(read);
 });
 read(); // initialize
 function read() {
 var html = element.html();
 if ( attrs.stripBr && html == '<br>' ) { //清除 <br>
  html = '';
 }
 ngModel.$setViewValue(html);
 }
 }
 };
});

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程
組件是我們在學(xué)習(xí)angular中必不可少的一部分，下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關(guān)資料，文中通過圖文與示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-11-11
Bootstrap與Angularjs的模態(tài)框?qū)嵗a
這篇文章主要介紹了Bootstrap與Angularjs的模態(tài)框?qū)嵗a,需要的朋友可以參考下
2017-08-08
深入淺析AngularJs模版與v-bind
v-bind與{{}}都可以對數(shù)據(jù)進(jìn)行綁定，接下來通過本文給大家介紹AngularJs模版與v-bind的相關(guān)知識，感興趣的朋友一起看看吧
2018-07-07
詳解Angualr 組件間通信
本篇文章主要介紹了Angualr 組件間通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
AngularJs中 ng-repeat指令中實(shí)現(xiàn)含有自定義指令的動態(tài)html的方法
今天用angular寫table的時(shí)候，遇到了一個(gè)問題。在ng-repeat中，含有動態(tài)的html，而這些html中含有自定義指令，怎么實(shí)現(xiàn)呢？下面小編給大家分享AngularJs中 ng-repeat指令中實(shí)現(xiàn)含有自定義指令的動態(tài)html的方法，一起看看吧
2017-01-01
AngularJS 實(shí)現(xiàn)JavaScript 動畫效果詳解
本文主要介紹AngularJS 實(shí)現(xiàn) JavaScript 動畫的資料，這里整理了詳細(xì)的資料和簡單示例代碼，有興趣的小伙伴可以參考下
2016-09-09
Angularjs的ng-repeat中去除重復(fù)數(shù)據(jù)的方法
這篇文章主要介紹了Angularjs的ng-repeat中去除重復(fù)數(shù)據(jù)的方法,涉及AngularJS針對重復(fù)數(shù)據(jù)的遍歷與過濾技巧,需要的朋友可以參考下
2016-08-08
AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果，文中提供了實(shí)例代碼，對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，下面來一起看看吧。
2016-09-09
利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識后，就可以開始創(chuàng)建第一個(gè)AngularJS應(yīng)用程序，這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù)，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-10-10
AngularJS之依賴注入模擬實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了AngularJS依賴注入模擬實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下
2016-08-08