最近开发一个功能，使用的是element的textarea组件，需求：
- enter保存
- Alt + enter换行
- 失去焦点触发保存接口。
原理：
- 判断if (!event.altKey && event.keyCode === 13)，触发保存功能。
- if (event.altKey && event.keyCode === 13) ，触发换行功能。
下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>element的textarea组件，enter保存，Alt + enter换行，解决换行失效，解决换行光标跑到整段文本后面</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 50px;
}
.el-textarea__inner {
width: 500px;
}
</style>
</head>
<body>
<div id="app">
<span>文本框：</span>
<el-input ref="textarea" type="textarea" autosize placeholder="" v-model="textarea" resize="none" @blur="blurAddFun"
maxlength="1000" @keydown.native="handleEnterAdd($event)" />
</div>
<script>
new Vue({
el: '#app',
data() {
return {
textarea: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'
}
},
created() {
},
methods: {
// 需求是按了enter保存,同时按下alt + enter键换行
handleEnterAdd(event) {
// 保存功能
// event.altKey: 是否按了alt键。event.keyCode === 13: 按了enter键
if (!event.altKey && event.keyCode === 13) {
// 失去焦点且内容不为空会触发保存接口
this.$refs.textarea.blur();
// 阻止浏览器默认换行操作
event.preventDefault();
return false;
}
// 换行功能
// event.altKey: 是否按了alt键。event.keyCode === 13: 按了enter键
if (event.altKey && event.keyCode === 13) {
// 获取光标位置
const cursorPosition = event.target.selectionStart;
// 在光标位置插入换行
this.textarea =
this.textarea.substring(0, cursorPosition) +
"\n" +
this.textarea.substring(cursorPosition);
this.$nextTick(() => {
// 解决换行光标跑到整段文本后面
this.$refs.textarea.$el
.querySelector("textarea")
.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
});
// 阻止浏览器默认换行操作
event.preventDefault();
return false;
}
// event.keyCode === 32: 按下空格
// 中文输入法下按下空格或其他的键: event.keyCode === 229
if (event.keyCode === 32 || event.keyCode === 229) {
// 阻止冒泡,解决在编辑文本框的时候按空格textarea不显示空格但播放视频的bug
event.stopPropagation();
}
},
// 失去焦点就调保存接口
blurAddFun() {
if (this.textarea) {
console.log(this.textarea, '调取保存接口')
}
},
}
})
</script>
</body>
</html>在开发过程中遇到几个问题：
1.如果不想触发浏览器的默认行为，比如按下空格会控制视频的播放和暂停，需要在@keydown.native方法最后使用event.preventDefault()来阻止浏览器默认换行操作。
2.换行需要拼接"\n"
3.当换行的时候会使光标跑到整段文本最后面，需要使用event.target.selectionStart获取光标的初始位置，然后在光标位置插入换行，最后使用this.$refs.textarea.$el.querySelector("textarea").setSelectionRange(cursorPosition + 1, cursorPosition + 1)就能够解决换行光标跑到整段文本后面。
4.在开发的过程中，如果用户是在中文输入法下面，随便输入文字也会触发浏览器默认行为，这时候添加event.keyCode === 229也阻止冒泡就可以解决这个问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。