angularjs使用div模擬textarea文本框的方法
更新時(shí)間：2018年10月02日 14:14:55 作者：飛向Hadoop
今天小編就為大家分享一篇angularjs使用div模擬textarea文本框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
html：
<div class="simulate-textarea" ng-model="view.text" contenteditable="true" placeholder="請(qǐng)輸入內(nèi)容"></div>
Angularjs指令：
/**
* div模擬textarea輸入框雙向數(shù)據(jù)綁定指令
*/
.directive('contenteditable', [function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
//view -> model
element.bind('input', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
//model -> view
ctrl.$render = function() {
element.html(ctrl.$viewValue);
};
}
};
}
css：
.simulate-textarea {
margin-left: 84px;
display: inline-block;
width: calc(100% - 84px);
/*border: 1px solid #dddddd;*/
min-height:20px;
_height: 20px;
max-height: 120px;
/*border-radius: 4px;*/
/*padding: 4px 6px;*/
outline: 0;
word-break:break-all;
word-wrap: break-word;
white-space: pre-wrap;
overflow-x: hidden;
overflow-y: auto;
line-height: 20px;
font-size: 12px;
}
以上這篇angularjs使用div模擬textarea文本框的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Angularjs中使用指令綁定點(diǎn)擊事件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運(yùn)行時(shí)對(duì)Scope變量賦值的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-01-01
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下2016-11-11
微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁(yè)面跳轉(zhuǎn)，jssdk校驗(yàn)失敗問題解決
本文主要介紹微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁(yè)面跳轉(zhuǎn)，jssdk校驗(yàn)失敗問題解決，這里提供了詳細(xì)的操作方式，有需要的小伙伴可以參考下2016-09-09
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要介紹了AngularJS中的過濾器filter用法,包括Angular中一些常用的自帶的過濾器的列舉以及自定義filter的方法,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了Angular4中的checkbox?全選按鈕啟用禁用的相關(guān)資料,需要的朋友可以參考下2023-03-03
angularjs中控制視圖的控制器的兩種注入依賴項(xiàng)及服務(wù)的寫法小結(jié)
在AngularJS中,控制器的依賴注入有兩種方法：顯式依賴注入和隱匿依賴注入,顯式依賴注入通過使用字符串?dāng)?shù)組形式來(lái)注入依賴項(xiàng),本文給大家介紹angularjs中控制視圖的控制器的兩種注入依賴項(xiàng)及服務(wù)的寫法,感興趣的朋友一起看看吧2024-09-09
Material(包括Material Icon)在Angular2中的使用詳解
這篇文章主要介紹了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了Angular的$http與$location，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12