JS实现@功能

置顶 于 2020-01-03 16:32:46 发布
阅读量2.5k 收藏 4
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyj168997/article/details/103822496
版权

参考文章网址

1.https://segmentfault.com/a/1190000007846897?utm_source=tag-newest

2.https://www.jianshu.com/p/fff5079b1268

下边是简单的demo代码，可以复制自己在本地执行

初始版本

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.box{
			width:600px;
			border:1px solid red;
			height:500px;
			line-height: 20px;
			font-size:14px;
		}
		.list{
			display: none;
		}
		button{
			background: #fff;
			line-height: 20px;
			font-size:14px;
			border:none ;
			color:blue;
			outline:none;
		}
	</style>
	<!-- jquery自己下载引入 -->
	<script charset="utf-8" src="jquery-3.1.1.min.js"></script>
</head>
<body>

	<div class="box" contenteditable="true" id="box">
		
	</div>
	<ul id="list" class="list">
		<li aid="one">1111</li>
		<li aid="two">2222</li>
		<li aid="three">3333</li>
		<li aid="four">4444</li>
		<li aid="five">5555</li>
	</ul>
	<script type="text/javascript">
		let lastSelection=null;
		$("#box").on('keydown',function(e){
			console.log(e.keyCode);
			if ( e.shiftKey&&e.keyCode == 50||(e.shiftKey&&e.keyCode == 229)) {//@符号-中文和英文输入法keyCode两种情况
				var selection = getSelection();
				var range  = selection.getRangeAt(0);
				// console.log(selection);
				// console.log(range);//返回一个包含当前选区内容的区域对象。
				// console.log(selection.focusOffset)//回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量。
				lastSelection={
					range:range,
					offset:selection.focusOffset,
					selection:selection
				};
				$("#list").show();
			}
		})
		$("#list li").on("click",function(){

			$("#list").hide();
			var ele = $('#box');
            ele.focus();
			var item=$(this).html();
			var selection = lastSelection.selection;
            var range = lastSelection.range;
			var textNode=range.startContainer;

			//删除页面中@符号
			range.setStart(textNode,range.endOffset);
			range.setEnd(textNode,range.endOffset+1);
			range.deleteContents();
			
			//创建button存放@内容，并且在button后边插入一个空格符，否则焦点不能重新获取到正确位置
			var button1=document.createElement("button");
			button1.setAttribute("contenteditable","false");
			button1.innerHTML='@'+$(this).html()+"&nbsp";

			var spanNode2=document.createElement("span");
			spanNode2.innerHTML='&nbsp;';
			
			var frag=document.createDocumentFragment();
			frag.appendChild(button1);
			lastNode=frag.appendChild(spanNode2.firstChild);

			//填入内容并且重新设置焦点位置
			range.insertNode(frag);
			selection.extend(lastNode,1);
			selection.collapseToEnd();
			
			//获取当前焦点位置删除button后边增加的空格符dom,防止在执行Backspace删除键时需要点两次才能删除@内容
			var selection = getSelection();
            var range =  selection.getRangeAt(0);
			var textNode=range.startContainer;

			range.setStart(textNode,range.endOffset-1);
			range.setEnd(textNode,range.endOffset);
			range.deleteContents();

		})
	</script>
</body>
</html>

2.修改后的demo代码

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.box{
			width:600px;
			border:1px solid red;
			height:500px;
			line-height: 20px;
			font-size:14px;
		}
		.list{
			display: none;
		}
		button{
			background: #fff;
			line-height: 20px;
			font-size:14px;
			border:none ;
			color:blue;
			outline:none;
		}
	</style>
	<!-- jquery自己下载引入 -->
	<script charset="utf-8" src="jquery-3.1.1.min.js"></script>
</head>
<body>

	<div class="box" contenteditable="true" id="box">
		
	</div>
	<ul id="list" class="list">
		<li aid="one">1111</li>
		<li aid="two">2222</li>
		<li aid="three">3333</li>
		<li aid="four">4444</li>
		<li aid="five">5555</li>
	</ul>
	<script type="text/javascript">
		let lastSelection=null;
		$("#box").on('keydown',function(e){
			console.log(e.keyCode);
			if ( e.shiftKey&&e.keyCode == 50||(e.shiftKey&&e.keyCode == 229)) {//@符号-中文和英文输入法keyCode两种情况
				var selection = getSelection();
				var range  = selection.getRangeAt(0);
				// console.log(selection);
				// console.log(range);//返回一个包含当前选区内容的区域对象。
				// console.log(selection.focusOffset)//回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量。
				lastSelection={
					range:range,
					offset:selection.focusOffset,
					selection:selection
				};
				$("#list").show();
			}
		})
		$("#list li").on("click",function(){

			$("#list").hide();
			var ele = $('#box');
            ele.focus();
			var item=$(this).html();
			var selection = lastSelection.selection;
            var range = lastSelection.range;
			var textNode=range.startContainer;

			//删除页面中@符号
			range.setStart(textNode,range.endOffset);
			range.setEnd(textNode,range.endOffset+1);
			range.deleteContents();
			
			//创建button存放@内容，并且在button后边插入一个空格符，否则焦点不能重新获取到正确位置
			var button1=document.createElement("button");
			button1.setAttribute("contenteditable","false");
			button1.innerHTML='@'+$(this).html()+"&nbsp";

			var spanNode2=document.createElement("span");
			spanNode2.innerHTML='&nbsp;';
			
			var frag=document.createDocumentFragment();
			// frag.appendChild(button1);
			lastNode=frag.appendChild(button1);
			//lastNode=frag.appendChild(spanNode2.firstChild);
			range.insertNode(frag);
            let contentRange = range.cloneRange();  //克隆选区
            contentRange.setStartAfter(lastNode);          //设置光标位置为插入内容的末尾
            contentRange.collapse(true);                   //移动光标位置到末尾
            selection.removeAllRanges();                  //移出所有选区
            selection.addRange(contentRange);//添加修改后的选区
			/*//填入内容并且重新设置焦点位置
			range.insertNode(frag);
			selection.extend(lastNode,1);
			selection.collapseToEnd();
			
			//获取当前焦点位置删除button后边增加的空格符dom,防止在执行Backspace删除键时需要点两次才能删除@内容
			var selection = getSelection();
            var range =  selection.getRangeAt(0);
			var textNode=range.startContainer;

			range.setStart(textNode,range.endOffset-1);
			range.setEnd(textNode,range.endOffset);
			range.deleteContents();*/

		})
	</script>
</body>
</html>

 

lyj168997
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript @符_JavaScript属性描述符
cuk0051的博客
08-26 872
javascript @符Any object in JavaScript has a set of properties, and each of these properties has a descriptor. JavaScript中的任何对象都有一组属性，并且每个属性都有一个描述符 。 This is an object that defines a property behavi...
js常用功能集合
@LPX的博客
06-02 1492
js常用功能集合 1.验证邮箱 function isEmail (number){ return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(number); } 2.验证手机号码 function isMobile (number) { return /^1[0-9]{10}$/.test(number) } 3.验证是否url地址 function isURL(number){ re
web 前端 @ 功能 JS 实现分析及其原理
weixin_33834137的博客
12-19 656
最近为实现一个新功能弄的焦头烂额 @xxx 的实现，在实现后写下些心得，供以后会跳入这坑的同志们参考。 首先，当让是考虑使用范围，由于项目仅仅需要考虑在 WEBKIT 环境下使用，所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在Mozilla 开发者网络上发现 selection 和 range 这两个关...
js中./和../的区别
蜗牛驿站
03-13 5521
./代表的是同级目录 ../代表的是上级目录 例如： 在editSaleOppFollow页面中，想要引入同目录下的oppSaleAgency.js，那么可以使用 &lt;script src="./oppSaleAgency.js"&gt;&lt;/script&gt; 也可以使用 &lt;script src="../preSaleAdd/oppSaleAgency.js...
js加入收藏功能
11-10
通过这段代码可以实现将某个页面加入到浏览器的收藏夹里；
js功能实现
影分身的专栏
11-02 480
左边补零 // 不足5位左边补零 (Array(5).join('0') + 100).slice(-5)
JavaScript聊天室@功能实现示例 vue-tribute-demo
06-23
这个示例项目"vue-tribute-demo"是基于Vue.js框架构建的，它实现了动态的@提及功能，利用了开源库Tribute.js。下面我们将深入探讨这个项目中的关键知识点。 首先，@提及功能是社交媒体和聊天应用中的一个核心特性，...
JavaScript评论点赞功能的实现方法
10-20
通过分析评论功能的逻辑关系，学会如何使用JavaScript实现评论、回复、点赞等各种功能。这篇文章主要介绍了JavaScript评论点赞功能的实现方法,需要的朋友可以参考下
微信小程序纯文本实现@功能
01-19
主要的复杂点在于一键删除功能与变色功能，web端可以使用现成库 caret.js 或者 At.js 来实现。但笔者需要在小程序中实现这个功能，而且在 textarea 标签里实现，当然@人名的变色功能自然而然就砍掉了。 准备工作 ...
js实现音频控制进度条功能
10-20
在本文中，我们将探讨如何使用JavaScript来实现一个音频播放器，并与进度条功能相结合。这个功能允许用户通过进度条直观地控制音频的播放位置。...以上就是使用JavaScript实现音频控制进度条功能的详细过程。
js完美实现@提到好友特效（兼容各大浏览器）
12-04
要求 1.输入@时，弹出匹配的好友菜单 2.光标进入包含有”@好友”的标签时，弹出菜单 3.按backspace删除时，如果光标前面是包含有”@好友”的标签，弹出菜单 4.兼容ie,firefox. 具体做法 针对要求一，很自然的会想到对输入框绑定事件。这里要绑定mousedown,而不是mouseup.因为如果是mouseup的话，用event.preventDefault()是无法阻止键盘输入@的。另外，这里在事件回调中用return false也是起不了作用的。 绑定mousedown事件后，就要插入自定义的包含有”@好友”的标签了。新浪微博的输入框是用textarea做的，无法知道其内
js常用功能汇总
不忘初心的博客
04-15 5128
1.多个class节点遍历： $(".department").each(function() { var $this = $(this); alert($this.val()); }) 2.js字符串的截取： sbustr 方法 返回一个从指定位置开始的指定长度的字符串 stringvar.substr(start,lenth); substring 方法 返
js中“+”用法
coder_girl的博客
08-04 1238
https://www.w3cplus.com/javascript/javascriptss-addition-operator-demystified.html
angularjs学习系（3）指令的@=&
热门推荐
ikscher的专栏
04-02 2万+
1：先说指令域scope的@     我觉得描述很费劲，直接用代码来阐述：     angularjs.html      //这个必须指定的，这里的title是指令里scope的@对应的，t就是控制域scope下的 我的angularjs    main05.js var myApp=an
javascript学习笔记
justinok的专栏
11-22 1869
一1.网页技术分为三个方面：静态网页、网页美工、动态网页。2.DHTML(动态HTML)是一种通过各种技术的综合而得以实现的概念，包括三部分：HTML、Script(JavaScrip or VBScript)、CSS(Cascading Style Sheets)。3.颜色“#rrggbb”六位十六进制数。4.js删除提示1)&lt;a  href="#" onclick="return(...
(fucntion(){})()
rfjian123的专栏
12-19 1590
自执行匿名函数： 常见格式：(function() { /* code */ })();解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各
JS和JSON提纲
ADNAP7的博客
06-01 574
1.js变量（数据类型）有字符串值，数值，布尔值，数组，对象，undefined。（null是object类型） undefined:没有值的变量，其值是undefined。typeof 也返回undefined。任何变量均可通过设置值为undefined进行清空。其类型也将是undefined。 ...
JavaScript实现评论功能
最新发布
04-19
JavaScript可以通过与后台服务器交互实现评论功能。一般来说，前端页面通过HTML表单将评论内容发送到后台服务器，后台服务器将评论内容存储到数据库中，然后返回数据到前端页面进行展示。而在JavaScript中，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值