在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾
Inserting HTML at cursors position and moving cursor to end of inserted html with javascript
我正在编写一个脚本,在下面提到的撰写页面中,将预先确定的html内容插入Gmail的可编辑iframe中。这个脚本只能在Firefox上的Greasemonkey中使用。所以我不需要考虑任何其他浏览器。
目前,它插入文本一次,然后被窃听。我想是因为range.setStart()期望第一个参数是一个节点,而createContextualFragment()不会返回。
有没有其他方法可以在当前光标的位置添加html,然后将光标移动到添加的html的末尾(而不是所有内容的末尾)?
https://mail.google.com/mail/?view=cm&fs=1&tf=1&source=mailto&至=example@example.com
function insertTextAtCursor(text) {
var sel, range, html, textNode;
if (window.frames[3].window.frames[0].getSelection()) {
sel = window.frames[3].window.frames[0].getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
textNode = range.createContextualFragment(text);
//textNode = document.createTextNode(text);
range.insertNode( textNode );
range.setStart(textNode, textNode.length);
range.setEnd(textNode, textNode.length);
sel.removeAllRanges();
sel.addRange(range);
window.frames[3].window.frames[0].focus();
}
}
}
更新1:如果我在插入html后对代码进行注释以移动光标,那么它就不再有问题了,但光标保持在同一位置。
//range.setStart(textNode, textNode.length);
//range.setEnd(textNode, textNode.length);
sel.removeAllRanges();
//sel.addRange(range);
给你带来了一些东西。
在这个答案的帮助下,我写下了这个:
- 将text/html粘贴到光标位置
- 将光标移动到文本区域的末尾
将其保存为test.html以在本地测试
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.fn.extend({
insertAtCaret: function(myValue){
return this.each(function(i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
}
else {
this.value += myValue;
this.focus();
}
})
}
});
var myhtml = '<b> this html will be <i>added</i> to the </b> cursor position (and will move to the end)';
var movetotheendof = '';
$(window).load(function(){
$('#btnpastepre').click(function() {
$('#txtarea').insertAtCaret(myhtml)
movetotheendof = $('#txtarea').val()
$('#txtarea').val("").val(movetotheendof)
})
});
</script>
</head>
<body>
<div id="formcontainer">
<button id="btnpastepre">click to paste</button>
<form id="formulario">
<textarea id="txtarea" cols=60 rows=20></textarea>
</form>
</div>
</body>
</html>
或单击此处在线测试:http://jsfiddle.net/RASG/Vwwm4/
现在你所要做的就是根据你的需要(gmail或任何其他网站)更改
编辑
我忘了你想要GM脚本:)
这是
// ==UserScript==
// @name TESTE 3
// @namespace TESTE 3
// @description TESTE 3
// @require http://code.jquery.com/jquery.min.js
// @include *
// @version 1
// ==/UserScript==
jQuery.fn.extend({
insertAtCaret: function(myValue){
return this.each(function(i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
}
else {
this.value += myValue;
this.focus();
}
})
}
});
var myhtml = '<b> this html will be <i>added</i> to the </b> cursor position (and will move to the end)';
var movetotheendof = '';
$(window).load(function(){
$('#btnpastepre').click(function() {
$('#txtarea').insertAtCaret(myhtml)
movetotheendof = $('#txtarea').val()
$('#txtarea').val("").val(movetotheendof)
})
})
只需用这个内容创建一个html文件来测试它
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="formcontainer">
<button id="btnpastepre">click to paste</button>
<form id="formulario">
<textarea id="txtarea" cols=60 rows=20></textarea>
</form>
</div>
</body>
</html>
相关文章:
- 使用PHP插入HTML在JavaScript上不起作用
- 如何使用innerHtml正确插入html
- AngularJS指令,在元素后插入HTML
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 通过jQuery插入HTML不起作用
- 通过javascript以编程方式将文件插入HTML输入
- 在DIV中动态插入HTML并访问新元素
- 在所有元素中插入HTML
- 在其他图像下使用javascript将图像插入html
- 在工具提示Javascript中插入HTML
- 在HTML字符串的某个段落后插入HTML
- 可以插入在插入HTML标记之前
- 从 AngularJS 将文本插入 HTML
- 将 javascript 返回值插入 html
- 流路由器 - 将内容插入 HTML 模板
- 插入html时是否有触发事件的方法
- JavaScript-插入HTML的内容部分
- jquery多次在元素之间插入html
- 将当前年份插入HTML
- 在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾