需求:判断当前textarea是否已经换行(这个换行有2种方式:1.不断输入文字直到超过指定宽度后自动换行;2.按了回车以后进行换行)

单纯的解决第二种换行很简单。网上提供了很多常规的解决方案。

Demo:http://www.cnblogs.com/xrwang/archive/2011/04/27/LineBreakInJavascript.html

但是这是不完备的。是不能根本解决问题的!

因为很显然不能解决第一种问题.有人会说使用wrap="off"强制不能换行。那么麻烦你先了解下wrap:http://www.w3schools.com/tags/att_textarea_wrap.asp

当你不断输入确实不能换行了。但是横向文字在不断增加。这个应该不是用户可以接受的方式吧。

下面说说我的解决方案。

做的时候设置line-height 比如说设置为30.

现在我们把操作的textarea 叫做a

在需要校验的时候。动态创建一个textarea 叫做b 具备a的一切样式 .最好的方式是将a clone下来。获取到里面的value值。设置当前的height为line-height也就是 30.

现在简单了 判断b的scrollHeight 的值是否大于30 即可。大于30说明换行了。用scrollHeight我们同样可以判断当前的行数

textarea 是否换行的问题解决的更多相关文章

  1. angularjs中类似textarea的换行、空格处理

    背景 今天测试人员测试出来一个显示数据的页面,没有换行. 原因剖析 这个页面是从一个<textarea>的页面拿到的数据,存到数据库中后再返回来的. 1. 知道这点之后,就有了调查方向了: ...

  2. html5 textarea 写入换行的方法

    html5 textarea 写入换行的方法<pre> <textarea id="fwe" class="selmiao" cols=&qu ...

  3. 关于textarea中换行、回车、空格的识别与处理

    需求:在textarea中输入文字,提交给后台后,后台输出在另一个页面,文字按原格式显示.   问题:如何还原输入框中的换行和空格? 兼容性:IE9以上.FF.chrome在换行处匹配/\n/     ...

  4. textarea内部换行实现

    当在使用textarea的时候,有一次需求,需要做到自定义换行,而不是通过textarea定宽来自动换行,其实在html中可以直接通过<br/>来换行,同时也想到用\n来实现换行,其结果是 ...

  5. html textarea 获取换行

    1.需求: 获取textarea中的换行符,存到数据库中,并在取出时显示出换行操作 2.实践 2.1 发现可以取到换行符 "/n" ,并且可以存储到MySQL数据库中,并不需要特殊 ...

  6. textarea文本换行和页面显示换行符

    在textarea里写的文本有换行,但是显示到页面后就不会自动换行,通过对数据分析发现textarea里的换行符是\n\r,然而HTML中的换行为<\br>解决办法有两种: 第一种:把文本 ...

  7. textarea 带换行符保存数据与带换行符展示数据

    毕业设计进行ing~ 最近要想要实现一个站内邮箱,想要带换行地输出邮件主体内容. 这两天为了解决这个问题百度了好多东西,发现相关问题有很多记录,可能这确实是大多数初学者也碰到的问题.自己找了好多地方都 ...

  8. js实现把textarea通过换行或者回车把多行数字分割成数组,并且去掉数组中空的值。

    删除数组指定的某个元素 var msg = " ";  //textarea  文本框输入的内容 var emp = [ ];   //定义一个数组,用来存msg分割好的内容 1. ...

  9. textarea使换行变顿号

    window.onload = function(){ document.getElementById('area').addEventListener('keydown',function(e){ ...

随机推荐

  1. Python3中bytes和HexStr之间的转换

    1 Python3中bytes和HexStr之间的转换 ByteToHex的转换 def ByteToHex( bins ): """ Convert a byte st ...

  2. 在阿里做了5年技术Leader,我总结出这些套路!

    转自 51CTO技术栈 内容 团队建设 团队管理 团队文化 沟通与辅导 招聘与解雇 互联网公司的技术团队管理通常分为两个方向:技术管理和团队管理,互联网公司的技术 TL 与传统软件公司的 PM 还是有 ...

  3. zip和rar文件的contentType

    zip.rar.msi等文件使用Chrome提交的ContentType都为null,IE可以正确获取

  4. Python中的encode和decode

    原文地址:http://www.cnblogs.com/tingyugetc/p/5727383.html 1.Python3中对文本和二进制数据进行了比较清晰的区分,文本总是 unicode ,由  ...

  5. JAVA--Mybatis-Spring-SpringMVC框架整合

    ------Mybatis-Spring-SpringMVC框架整合示例----- mybatis SQL映射文件 <?xml version="1.0" encoding= ...

  6. 注册登录页面修订-Python使用redis-手机验证接口-发送短信验证

    登录页面修订 views.Login.vue <template> <div class="login box"> <img src="@/ ...

  7. Python笔记_第三篇_面向对象_9.Python中的"get"和"set"方法(@property和@.setter)

    1. 限制访问的问题: 如果学过C# 语言的我们可以知道C# 语言有get和set方法.我们之前想要获取父类中的私有变量,只能通过写一个set和get的函数进行访问或者通过类生成的新关键字来访问私有属 ...

  8. screen 用法

    登陆Linux服务器跑程序, 担心ssh连接被中断后,导致跑了一半的任务被强制终止. 一个比较好的办法是使用 screen 命令, 下面是使用说明 类型 命令 备注 创建 screen 查看 scre ...

  9. Patroni 修改配置

    Patroni 修改配置 背景 使用 Patroni 部署 postgresql 集群的时候,不能单独修改单点的配置,这里需要通过 Patroni 来修改配置. 修改步骤 1. 修改 postgres ...

  10. 黑马eesy_15 Vue:03.生命周期与ajax异步请求

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...