使用JS解决TextArea换行失效

前段时间在处理一个需求时，要求输入产品加工的加工要求，加工要求会很多，希望可以换行显示，我心想这不简简单单，直接使用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;
}

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