我的页面上有很多文本框。当有人单击链接时,我希望在光标所在的位置插入一两个单词,或将其附加到具有焦点的文本框中。
例如,如果光标/焦点在文本框上说“ apple”,而他单击一个链接上说“ [email]”,那么我希望文本框说“ apple bob@example.com”。
我怎样才能做到这一点?如果焦点集中在radio / dropdown / non textbox元素上,该怎么办呢?可以记住上一个专注于文本框的内容吗?
从这里使用:
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>
也许是较短的版本,会更容易理解吗?
jQuery("#btn").on('click', function() {
var $txt = jQuery("#txt");
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = "stuff";
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />
我写这篇文章是为了响应如何使用jquery从指针的当前位置向文本框添加文本?
乔治·克拉格霍恩(George Claghorn)批准的答案非常适合简单地在光标位置插入文本。但是,如果用户选择了文本,并且希望替换该文本(大多数文本的默认体验),则在设置“后退”变量时需要进行一些小的更改。
另外,如果不需要支持IE的较早版本,则现代版本也支持textarea.selectionStart,因此您可以删除所有浏览器检测以及IE特定的代码。
这是一个简化版本,至少适用于Chrome和IE11,并且可以替换选定的文本。
function insertAtCaret(areaId, text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var caretPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0, caretPos);
var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
txtarea.value = front + text + back;
caretPos = caretPos + text.length;
txtarea.selectionStart = caretPos;
txtarea.selectionEnd = caretPos;
txtarea.focus();
txtarea.scrollTop = scrollPos;
}
上面的代码不适用于IE。这是基于此答案的一些代码。
我取出,getElementById
以便可以以其他方式引用该元素。
function insertAtCaret(element, text) {
if (document.selection) {
element.focus();
var sel = document.selection.createRange();
sel.text = text;
element.focus();
} else if (element.selectionStart || element.selectionStart === 0) {
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
var scrollTop = element.scrollTop;
element.value = element.value.substring(0, startPos) +
text + element.value.substring(endPos, element.value.length);
element.focus();
element.selectionStart = startPos + text.length;
element.selectionEnd = startPos + text.length;
element.scrollTop = scrollTop;
} else {
element.value += text;
element.focus();
}
}
input{width:100px}
label{display:block;margin:10px 0}
<label for="in2copy">Copy text from: <input id="in2copy" type="text" value="x"></label>
<label for="in2ins">Element to insert: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="insertAtCaret(document.getElementById('in2ins'),document.getElementById('in2copy').value)">Insert</button>
编辑:添加了一个正在运行的代码段,没有使用jQuery。
使用@quick_sliv答案:
function insertAtCaret(el, text) {
var caretPos = el.selectionStart;
var textAreaTxt = el.value;
el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};
如何通过JQuery和JavaScript将一些Text插入到TextBox的当前光标位置
处理
- 查找当前光标位置
- 获取要复制的文本
- 在那边设置文字
- 更新光标位置
在这里,我有2个文本框和一个按钮。我必须单击文本框上的某个位置,然后单击按钮以将文本从另一个文本框粘贴到上一个文本框的位置。
这里的主要问题是获取当前光标位置,我们将在此处粘贴文本。
//Textbox on which to be pasted
<input type="text" id="txtOnWhichToBePasted" />
//Textbox from where to be pasted
<input type="text" id="txtFromWhichToBePasted" />
//Button on which click the text to be pasted
<input type="button" id="btnInsert" value="Insert"/>
<script type="text/javascript">
$(document).ready(function () {
$('#btnInsert').bind('click', function () {
var TextToBePasted = $('#txtFromWhichToBePasted').value;
var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted');
//Paste the Text
PasteTag(ControlOnWhichToBePasted, TextToBePasted);
});
});
//Function Pasting The Text
function PasteTag(ControlOnWhichToBePasted,TextToBePasted) {
//Get the position where to be paste
var CaretPos = 0;
// IE Support
if (document.selection) {
ControlOnWhichToBePasted.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0')
CaretPos = ControlOnWhichToBePasted.selectionStart;
//paste the text
var WholeString = ControlOnWhichToBePasted.value;
var txt1 = WholeString.substring(0, CaretPos);
var txt2 = WholeString.substring(CaretPos, WholeString.length);
WholeString = txt1 + TextToBePasted + txt2;
var CaretPos = txt1.length + TextToBePasted.length;
ControlOnWhichToBePasted.value = WholeString;
//update The cursor position
setCaretPosition(ControlOnWhichToBePasted, CaretPos);
}
function setCaretPosition(ControlOnWhichToBePasted, pos) {
if (ControlOnWhichToBePasted.setSelectionRange) {
ControlOnWhichToBePasted.focus();
ControlOnWhichToBePasted.setSelectionRange(pos, pos);
}
else if (ControlOnWhichToBePasted.createTextRange) {
var range = ControlOnWhichToBePasted.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
将文本添加到当前光标位置涉及两个步骤:
- 在当前光标位置添加文本
- 更新当前光标位置
演示:https : //codepen.io/anon/pen/qZXmgN
在Chrome 48,Firefox 45,IE 11和Edge 25中进行了测试
JS:
function addTextAtCaret(textAreaId, text) {
var textArea = document.getElementById(textAreaId);
var cursorPosition = textArea.selectionStart;
addTextAtCursorPosition(textArea, cursorPosition, text);
updateCursorPosition(cursorPosition, text, textArea);
}
function addTextAtCursorPosition(textArea, cursorPosition, text) {
var front = (textArea.value).substring(0, cursorPosition);
var back = (textArea.value).substring(cursorPosition, textArea.value.length);
textArea.value = front + text + back;
}
function updateCursorPosition(cursorPosition, text, textArea) {
cursorPosition = cursorPosition + text.length;
textArea.selectionStart = cursorPosition;
textArea.selectionEnd = cursorPosition;
textArea.focus();
}
HTML:
<div>
<button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button>
<button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button>
<button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button>
</div>
<textarea id="textArea" rows="20" cols="50"></textarea>
我认为您可以使用以下JavaScript跟踪最后关注的文本框:
<script>
var holdFocus;
function updateFocus(x)
{
holdFocus = x;
}
function appendTextToLastFocus(text)
{
holdFocus.value += text;
}
</script>
用法:
<input type="textbox" onfocus="updateFocus(this)" />
<a href="#" onclick="appendTextToLastFocus('textToAppend')" />
先前的解决方案(针对gclaghorn的解决方案)也使用textarea并计算光标的位置,因此它可能对您想要的更好。另一方面,如果您正在寻找的话,这将是更轻巧的。
在Internet Explorer 9上,接受的答案对我不起作用。我检查了该答案,并且浏览器检测未正常工作,当我在Internet Explorer上时,它检测到ff(firefox)。
我只是做了这个改变:
if ($.browser.msie)
代替:
if (br == "ie") {
结果代码如下:
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if ($.browser.msie) {
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 range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
这个jQuery插件为您提供了一种预先选择/插入符号操作的方式。
您只能将所需的文本框聚焦,然后在其中插入文本。没有办法找出AFAIK的重点(可能是在所有DOM节点上进行交互吗?)。
检查一下stackoverflow-它为您提供了一个解决方案:
如何找出焦点所在的DOM元素?
内容可编辑,HTML或任何其他DOM元素选择
如果您尝试在的插入符号处插入<div contenteditable="true">
,这会变得更加困难,尤其是在可编辑容器中有子级的情况下。
使用Rangy库,我真的很幸运:
它具有许多很棒的功能,例如:
- 保存位置或选择
- 然后,稍后恢复位置或选择
- 获取选择HTML或纯文本
- 除其他外
我上次检查时在线演示无法正常工作,但是该回购库具有有效的演示。首先,只需从Git或NPM下载回购,然后打开./rangy/demos/index.html
它使插入符号pos和文本选择的工作变得轻而易举!
这个问题的答案是很久以前发布的,我通过Google搜索偶然发现了。HTML5提供了HTMLInputElement API,其中包含setRangeText()方法,该方法用新的字符串替换<input>
or<textarea>
元素中的文本范围:
element.setRangeText('abc');
上述将取代内部作出的选择element
有abc
。您还可以指定替换输入值的哪一部分:
element.setRangeText('abc', 3, 5);
以上将用替换输入值的第4至第6个字符abc
。您还可以通过提供以下字符串之一作为第4个参数来指定替换文本后应如何设置选择:
'preserve'
尝试保留选择。这是默认值。'select'
选择新插入的文本。'start'
将选择内容移动到插入文本之前。'end'
将选择内容移动到插入文本之后。
浏览器兼容性
setRangeText的MDN页面不提供浏览器兼容性数据,但我想它与HTMLInputElement.setSelectionRange()相同,后者基本上是所有现代浏览器,IE 9和更高版本,Edge 12和更高版本。
文章标签:javascript , jquery
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!