js实现 ctrl + enter 换行，让可以编辑的div实现换行功能，并获取输入的光标

最新推荐文章于 2023-01-29 22:40:00 发布

扛把子小雪

最新推荐文章于 2023-01-29 22:40:00 发布

阅读量3.3k

点赞数

文章标签： vue.js jquery javascript

本文链接：https://blog.youkuaiyun.com/guoguo_love521/article/details/103736021

版权

我觉的不说那么多了，直接上代码吧，大家看了可以给提提建议，谢谢
我们的功能中有@功能，有本地上传，图片上传，笑脸图标功能，这次先说换行的
在这里插入图片描述

<div  ref="cTextareaRef"
      id="chatroom_footer_text_textarea"
      @keyup.ctrl.enter="lineFeed($event)"
      placeholder="请输入消息"
      contenteditable="true">
</div>

lineFeed(e) { // 换行
 	var e = e || window.event, ec = e.keyCode || e.which;
 	if (e.ctrlKey && 13 == ec) {
	   if (this.browserType() == 'IE' || this.browserType() == 'Edge') {
	     $("#chatroom_footer_text_textarea").append("<div></div>")
	   } else if (this.browserType () == 'FF') {
	     $("#chatroom_footer_text_textarea").append("<br/><br/>")
	   } else {
	     $("#chatroom_footer_text_textarea").append("<br/>")
	   }
	   if(this.$refs.cTextareaRef.innerHTML == "") {
	     this.$refs.cTextareaRef.innerHTML = this.$refs.cTextareaRef.innerHTML + '<br/>'
	   }
	   document.execCommand('insertHTML', 'false', '<br/>')
	 }
},

browserType () {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = false;
        if (userAgent.indexOf('Edge') > -1) {
          return "Edge";
        }
        if (userAgent.indexOf('.NET') > -1) {
          return "IE";
        }
        if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
          isOpera = true;
          return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
          return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1) {
          return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
          return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
          return "IE";
        }; //判断是否IE浏览器
      },