angularjs使用div模拟textarea文本框的方法
html:
<div class="simulate-textarea" ng-model="view.text" contenteditable="true" placeholder="请输入内容"></div>
Angularjs指令:
/** * div模拟textarea输入框双向数据绑定指令 */ .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文本框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
div实现自适应高度的textarea实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了. textarea不是不可以的,然后我是这样错的.(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫 textarea.bind('change','keydown'){ if(scrollTop > 0 ) { textarea.rows += 1 } } 正确的
-
利用Angular.js限制textarea输入的字数
前言 大家可能都遇到过在输入的时候做出限制的需求,本文介绍的是通过Angular.js限制textarea输入字数的方法,有需要的朋友们可以参考以下实例. 实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS 简单应用程序--输入字数限制</title> <!-- @author:sm @email:sm0
-
angularjs使用div模拟textarea文本框的方法
html: <div class="simulate-textarea" ng-model="view.text" contenteditable="true" placeholder="请输入内容"></div> Angularjs指令: /** * div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', [function() { retu
-
JS给Textarea文本框添加行号的方法
本文实例讲述了JS给Textarea文本框添加行号的方法.分享给大家供大家参考.具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配. 运行效果截图如下: 在线演示地址如下: http://demo.jb
-
jQuery实现限制textarea文本框输入字符数量的方法
本文实例讲述了jQuery实现限制textarea文本框输入字符数量的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn.extend( { limiter: function(limit, elem) { $(this).on("keyup focus", function() { setCount(this, elem); }); function setCount(src, elem) { var chars = src.value.lengt
-
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
本文实例讲述了jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法.分享给大家供大家参考,具体如下: 一.先描述下可以实现什么: 下拉框一改变,弹出框出现,选择弹出框中的值会赋值给下拉菜单 二.代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Subscribe策略</ti
-
js实现将选中值累加到文本框的方法
本文实例讲述了js实现将选中值累加到文本框的方法.分享给大家供大家参考.具体如下: 这里实现JavaScript将列表框或单选框选中的值累计加入到文本框中,在一些表单中,我们经常会看到这种功能,可以免去用户输入的麻烦,提升用户体验.变通一下,你还可以做出更多的类似功能来. 运行效果截图如下: 具体代码如下: <html> <head> <title>js将选中值添加到文本框</title> <SCRIPT LANGUAGE="JavaScri
-
jquery聚焦文本框与扩展文本框聚焦方法
光标聚焦的位置在最前面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title&g
-
js实现键盘上下左右键选择文字并显示在文本框的方法
本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo
-
JS实现自适应高度表单文本框的方法
本文实例讲述了JS实现自适应高度表单文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
JS实现下拉菜单赋值到文本框的方法
本文实例讲述了JS实现下拉菜单赋值到文本框的方法.分享给大家供大家参考.具体如下: 这里演示下拉菜单和文本框构建的介绍栏,将Select框中的值定位到INPUT文本输入框中,是下拉框赋值到文本框的实例,上网时候貌似经常见的功能,只是不知如何形容,或许叫做联动吧. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-to-input-val-codes/ 具体代码如下: <html> <head> <SCRIP
-
JS实现超过长度限制后自动跳转下一款文本框的方法
本文实例讲述了JS实现超过长度限制后自动跳转下一款文本框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
随机推荐
- ip地址切换批处理脚本分享
- Windows XP系统注册表十则设置技巧
- Java 字符串的拼接详解
- Python实现从脚本里运行scrapy的方法
- Asp.net Core 初探(发布和部署Linux)
- 在table中插入多行,能使用与insertAdjacentHTML相似的功能吗?
- JAVA 根据数据库表内容生产树结构JSON数据的实例代码
- PHP 7安装调试工具Xdebug扩展的方法教程
- Python利用Beautiful Soup模块搜索内容详解
- php中获得视频时间总长度的另一种方法
- ajax实现异步文件或图片上传功能
- 深入浅析python中的多进程、多线程、协程
- JSP过滤器防止Xss漏洞的实现方法(分享)
- Android下的EXIF是什么
- XSS 0DAY代码
- php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法 原创
- Spring中属性文件properties的读取与使用详解
- Android操作系统的架构设计分析
- Java基于二叉查找树实现排序功能示例
- 浅谈ASP.NET的include的使用方法