使用JS解决TextArea换行失效

前段时间在处理一个需求时，要求输入产品加工的加工要求，加工要求会很多，希望可以换行显示，我心想这不简简单单，直接使用textarea就行了，但是在使用了textarea后却发现，换行失效了，在查阅了资料以及排查后，最终确定可能是因为公司所使用的框架有一个keydown事件，这个事件具体是干什么用的我也不清楚，对于刚刚毕业的我来说，又是刚刚进入公司，源码我是看不到的，于是我就在网上尝试找解决方案，答案也是五花八门，先是尝试了使用CSS处理，没有效果，最后使用JS解决，但是又没能达到我的预期效果，所以最终我还是决定自己用js来解决。

首先，捋清思路，要想实现换行，那么我就得知道按下回车时光标的位置，然后将光标前的内容加上换行再加上光标后的内容再赋值给textarea给行了，于是开始写：

//如果按下的是回车
if (event.keyCode == 13) {//获取textareavar context = document.querySelector('#txt'); //获取textarea的值var value = context.value;//截取光标位置前的值var start = value.slice(0, context.selectionStart); //截取光标位置后的值var end = value.slice(context.selectionStart); //textarea的值 = 光标前的值 + 换行 + 光标后的值context.value = start + "\n" + end;
}

试了下，可以实现换行了，但是又出现了新的问题，换行后我希望光标能停留在我换行后的位置，现在是无论在哪里换行，光标都会自动回到末尾，那么，我们可以先记录下换行前光标的位置，换行后在设置光标的位置 = 换行前的光标位置 + 1就行了，因为添加了一个换行符，因此这里的光标位置要在之前的基础上+1，于是，在之前的基础上：

//如果按下的是回车
if (event.keyCode == 13) {//获取textareavar context = document.querySelector('#txt'); //获取textarea的值var value = context.value;//记录换行前光标的位置var position = context.selectionStart;//截取光标位置前的值var start = value.slice(0, context.selectionStart); //截取光标位置后的值var end = value.slice(context.selectionStart); //textarea的值 = 光标前的值 + 换行 + 光标后的值context.value = start + "\n" + end;//设置光标开始位置 = 换行前光标位置 + 1context.selectionStart = position + 1;//设置光标结束位置 = 换行前光标位置 + 1//如果不设置光标的结束位置，就会将光标开始位置到结尾的内容选中context.selectionEnd = position + 1;
}

至此，问题解决，如果有更好的解决方案，欢迎留言讨论。

使用JS解决TextArea换行失效相关推荐

js textarea换行分隔成数组和数组转换行符textarea回显
在web的前端操作中,有时候需要将 html 的 textarea 标签元素中的内容以每行的形式转成一个数组并发向后台,在编辑的时候,数组数据需要taxtarea换行显示.那么该如何做呢? 下面这篇博 ...
【解决回车键出现乱码的问题】禁用Enter键触发form表单提交的问题，同时启用保留textarea换行操作
问题描述 Enter键触发form表单提交的问题 ,同时启用保留textarea换行操作 ##解决回车键出现乱码的问题代码如下(示例): <script type="text/jav ...
js textarea换行
利用html换行符或. 查看全文 http://www.taodudu.cc/news/show-4947167.html 相关文章: textarea 标签内换行 [解决回车键出现乱码的问题]禁用E ...
用JS解决多行溢出文本的省略问题
前言在项目开发过程中,经常会遇到溢出文本的省略问题.根据需求,可以把文本省略分为单行文本省略和多行文本省略两类. 单行文本的省略,现在css样式 text-overflow 已经有兼容性很好的样式支 ...
linux记事本的文本换到win10 换行失效的问题
win10记事本右下角应该是显示跟linux的文本记事本不太一样 linux的是其中换行符什么的编码不太一样所以某些系统如win server 读到unix的记事本文本会直接全部换行失效但是w ...
常见textarea换行问题的处理方法
textarea换行时主要遇到的有以下两个问题 1.在textarea中输入回车符在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在 ...
PC端微信浏览器js点击事件失效
**电脑端微信浏览器js点击事件失效**前段时间发现开发的一个微信公众号上一个按钮的点击事件在手机上是正常的,电脑端手机微信里却不起作用.在网上找了好久都没有找到解决办法.后来查看其它的页面的同样的点 ...
mysql textarea 换行_textarea换行
在easyui中的datagrid中使用行内编辑时textarea的换行保存到mysql数据库为\n 在textarea中输入回车符在js读取textarea中的值有\r\n然后到业务层转换到str ...
HTML之textarea 换行和空格问题
关于淘气的textarea textarea --多行文本域. textarea 中的空格 textarea 的默认赋值,是放在两个标签中间,标签中间的空格会保留到textarea中: <tex ...

使用JS解决TextArea换行失效

使用JS解决TextArea换行失效相关推荐

最新文章

热门文章