我有一个有很多文本框的页面。当有人点击链接时,我希望在光标所在的位置插入一个或两个单词,或者将其附加到具有焦点的文本框中。
例如,如果光标/焦点在一个文本框上,显示为'apple‘,而他点击了一个显示为'email’的链接,那么我希望文本框显示为'apple bob@example.com‘。
我该怎么做呢?既然焦点在单选/下拉/非文本框元素上,这是可能的吗?上一次聚焦在文本框上的内容还能被记住吗?
发布于 2009-06-30 14:56:48
使用这个,来自here
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>
发布于 2013-04-13 01:04:28
也许更短的版本会更容易理解?
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" />
我写这篇文章是为了回应How to add a text to a textbox from the current position of the pointer with jquery?
发布于 2015-02-06 04:33:50
George Claghorn认可的答案对于简单地在光标位置插入文本非常有效。但是,如果用户选择了文本,而您希望替换该文本(大多数文本的默认体验),则需要在设置'back‘变量时进行小的更改。
此外,如果你不需要支持旧版本的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;
}
https://stackoverflow.com/questions/1064089
复制相似问题