欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年01月08日 10:26:49   作者：miaowwwww  
本文主要介紹了div實(shí)現(xiàn)自適應(yīng)高度的textarea，實(shí)現(xiàn)angular雙向綁定的方法。具有一定的參考價值，下面跟著小編一起來看下吧

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

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

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

textarea不是不可以的，然后我是這樣錯的。（就是監(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)核，所以使用這個夠了

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

/*
* 可編輯的div
* 應(yīng)用于發(fā)表評論中有表情的時候，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í)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

最新評論