前段时间在处理一个需求时,要求输入产品加工的加工要求,加工要求会很多,希望可以换行显示,我心想这不简简单单,直接使用textarea就行了,但是在使用了textarea后却发现,换行失效了,在查阅了资料以及排查后,最终确定可能是因为公司所使用的框架有一个keydown事件,这个事件具体是干什么用的我也不清楚,对于刚刚毕业的我来说,又是刚刚进入公司,源码我是看不到的,于是我就在网上尝试找解决方案,答案也是五花八门,先是尝试了使用CSS处理,没有效果,最后使用JS解决,但是又没能达到我的预期效果,所以最终我还是决定自己用js来解决。
首先,捋清思路,要想实现换行,那么我就得知道按下回车时光标的位置,然后将光标前的内容加上换行再加上光标后的内容再赋值给textarea给行了,于是开始写:
//如果按下的是回车
if (event.keyCode == 13) {
//获取textarea
var 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) {
//获取textarea
var 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;
//设置光标开始位置 = 换行前光标位置 + 1
context.selectionStart = position + 1;
//设置光标结束位置 = 换行前光标位置 + 1
//如果不设置光标的结束位置,就会将光标开始位置到结尾的内容选中
context.selectionEnd = position + 1;
}
至此,问题解决,如果有更好的解决方案,欢迎留言讨论。