在光标所在的位置使用Javascript / jquery插入文本

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (67)

我有一个有很多文本框的页面。当有人点击一个链接时,我希望在光标所在的位置插入一两个单词,或者附加到具有焦点的文本框中。

例如,如果光标/焦点在一个文本框上,上面写着‘Apple’,而他点击了一个链接电子邮件然后我想让文本框上写着‘Apple bob@example.com’。

我该怎么做?

提问于
用户回答回答于

用这个

	function insertAtCaret(areaId, text) {
		var txtarea = document.getElementById(areaId);
		if (!txtarea) { return; }

		var scrollPos = txtarea.scrollTop;
		var strPos = 0;
		var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
			"ff" : (document.selection ? "ie" : false ) );
		if (br == "ie") {
			txtarea.focus();
			var range = document.selection.createRange();
			range.moveStart ('character', -txtarea.value.length);
			strPos = range.text.length;
		} else if (br == "ff") {
			strPos = txtarea.selectionStart;
		}

		var front = (txtarea.value).substring(0, strPos);
		var back = (txtarea.value).substring(strPos, txtarea.value.length);
		txtarea.value = front + text + back;
		strPos = strPos + text.length;
		if (br == "ie") {
			txtarea.focus();
			var ieRange = document.selection.createRange();
			ieRange.moveStart ('character', -txtarea.value.length);
			ieRange.moveStart ('character', strPos);
			ieRange.moveEnd ('character', 0);
			ieRange.select();
		} else if (br == "ff") {
			txtarea.selectionStart = strPos;
			txtarea.selectionEnd = strPos;
			txtarea.focus();
		}

		txtarea.scrollTop = scrollPos;
	}
<textarea id="textareaid"></textarea>
<a href="#" onclick="insertAtCaret('textareaid', 'text to insert');return false;">Click Here to Insert</a>

热门问答

Tencent iot-sdk-embedded-c在Windows下编译出错:无法解析外部符号?

无聊至极互联网重度用户
推荐已采纳

智能钛机器学习平台的模型怎么从外部调用?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐

腾讯云IM调用 add_group_member提示该群不能邀请成员?

推荐已采纳
是什么类型的群?根据相应类型的邀请他人入群的控制项,对照文档看下是否允许邀请他人入群。 参考文档:https://cloud.tencent.com/document/product/269/1502#.E7.BE.A4.E6.88.90.E5.91.98.E6.93.8D.E4...... 展开详请

负载均衡监听器绑定云服务器,其端口状态为异常是什么原因造成的呢?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
端口异常说明是健康检查异常,可以按照如下步骤进行排查: 1. 确保后端RS端口或服务可以正常访问,可以通过curl(七层)或者telnet(四层)测试外网是否可以访问,如果不可访问检查web服务器配置,防火墙和安全组设置; 2. 确保安全组中放行了CLB的VIP,健康检查探测是通...... 展开详请

在小程序开通直播功能,是不是还需要业务去申请直播的证书?

推荐
腾讯云有商业直播方案(提供小程序直播插件),客户通过直播插件实现直播业务(不需额外提供直播资质) 插件对接条件: 客户小程序类目为“电商平台”或“在线教育” 所以就是说, 只要用了腾讯云的小程序直播方案, 小程序的类目为 “电商平台” 或“ 在线教育”, 就可以。只要自身业务不...... 展开详请

腾讯云 TRTC 互动直播 云直播 商业直播区别是什么?

人生的旅途辣鸡前端
推荐
云直播:腾讯云的直播云端处理分发平台 移动直播:腾讯云提供的直播推拉流集成的sdk(iOS、Android、小程序) 互动直播:云直播(云端)+移动直播(终端)+连麦功能 商业直播:基于云直播的直播小程序插件(SaaS腾讯云提供页面模板,PaaS客户自己开发) 商业直播和移动直播...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券