Javascript 替换文本区域内没有焦点的文本
我想替换所选文本（如果未选择任何内容，则在光标位置后插入新文本）。 新文本是从另一个文本框输入的。Javascript 替换文本区域内没有焦点的文本,javascript,html,textarea,selection,Javascript,Html,Textarea,Selection,我想替换所选文本（如果未选择任何内容，则在光标位置后插入新文本）。 新文本是从另一个文本框输入的。 我希望能够插入新文本，而无需先单击文本区域中的（对焦）。 含义：首先在文本区域内选择要替换的文本，然后在文本框中输入新文本并单击按钮 <textarea id='text' cols="40" rows="20"> </textarea> <div id="opt"> <input id="input" type="text" size="35"
我希望能够插入新文本，而无需先单击文本区域中的（对焦）。
含义：首先在文本区域内选择要替换的文本，然后在文本框中输入新文本并单击按钮
<textarea id='text' cols="40" rows="20">
</textarea>
<div id="opt">
<input id="input" type="text" size="35">
<input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>
</div>
function pasteIntoInput(text) {
el=document.getElementById("text");
el.focus();
if (typeof el.selectionStart == "number"&& typeof el.selectionEnd == "number") {
var val = el.value;
var selStart = el.selectionStart;
el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
el.selectionEnd = el.selectionStart = selStart + text.length;
}
else if (typeof document.selection != "undefined") {
var textRange = document.selection.createRange();
textRange.text = text;
textRange.collapse(false);
textRange.select();
}
}
函数粘贴输入（文本）{
el=document.getElementById（“文本”）；
el.focus（）；
if（type of el.selectionStart==“number”&&type of el.selectionEnd==“number”）{
var val=el.value；
var selStart=el.selectionStart；
el.value=val.slice（0，selStart）+text+val.slice（el.selectionEnd）；
el.selectionEnd=el.selectionStart=selStart+text.length；
}
else if（typeof document.selection！=“未定义”）{
var textRange=document.selection.createRange（）；
textRange.text=文本；
textRange.collapse（false）；
textRange.select（）；
}
}
因此，当您将焦点放在文本区域外并将焦点放在输入标记上时，您希望保留选择 您需要记住选择（文本区域失去焦点时的起点和终点），并强制选择以使其持续 要记住选择，可以将
el.selectionStartel.selectionEndonblur（）然后在您的代码> PATSITONTIN（）/代码>中，您可以考虑这两个点进行替换。< /P> 要强制选择-请选中此解决方案以取消选择。但是，这使用jquery，而不是普通的javascript
然而，我不确定这个解决方案是否真的有效。我在这里试过了，但没有达到预期效果 更新 我怀疑在焦点消失后是否有可能继续选择。可能选择需要焦点，我给出的答案链接会尝试聚焦然后选择。在这种情况下，这不会解决你的问题。因此，备选方案可以是：- 用html div伪造文本区域。您可以定义一些样式来创建类似选择的效果，并应用它
，或者使用简单的现成编辑器（如果可用）onblur（） - 在单独的区域中动态显示所选内容。看看这个。请记住，您已经将所选内容存储在全局变量中，用于实际替换。您只需向用户显示将被替换的选择。我认为像这个演示一样单独显示选择可以节省您的时间，而且看起来也很酷
<textarea id='text' cols="40" rows="20" onbeforedeactivate="storeSelectionIeCase();" onblur="storeSelectionOthersCase();">
</textarea>
<div id="opt">
<input id="input" type="text" size="35">
<input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>
</div>
onblur（）感谢帮助我识别上一把小提琴问题的人。好的，纠正我的错误 1） 选择文本区域中的文本后，单击按钮，所选文本将替换为输入中的文本。
2） 当未选择任何文本时，无论光标位置如何，文本都会自动添加到文本区域的最末端 如果这些是唯一的规定，那么这个javascript就足够了，否则我需要更多关于您希望它做什么的信息
function pasteIntoInput(text) {
el=document.getElementById("text");
el.focus();
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number" && el.selectionStart != el.selectionEnd) {
var val = el.value;
var selStart = el.selectionStart;
el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
el.selectionEnd = el.selectionStart = selStart + text.length;
}
else
el.value += text;
}
很抱歉，我无法提供更多帮助，了解该功能的使用将有助于我提供所需的操作。这是基于以上答案和更多想法的替代解决方案。
仅适用于IE（其他浏览器默认支持此功能） 需要更多的测试（我只是在IE8中测试过）
var-pos=0；
var-len=0；
函数粘贴输入（文本）{
var el=document.getElementById（“文本”）；
el.focus（）；
if（el.selectionStart的类型=“number”&&type el.selectionEnd==“number”）{
var val=el.value；
var selStart=el.selectionStart；
el.value=val.slice（0，selStart）+text+val.slice（el.selectionEnd）；
el.selectionEnd=el.selectionStart=selStart+text.length；
}
else if（typeof document.selection！=“未定义”）{
//var textRange=document.selection.createRange（）；
var textRange=el.createTextRange（）；
//el.focus（）；
如果（len>0）{//something被选中，那么替换
textRange.collapse（true）；
textRange.moveEnd（'character'，pos+len）；
textRange.moveStart（'character'，pos）；
textRange.select（）；
textRange.text=文本；
}
否则{
textRange.collapse（true）；
textRange.moveEnd（'字符'，位置）；
textRange.moveStart（'character'，pos）；
textRange.text=文本；
textRange.select（）；
}
el.focus（）；
}
}
函数GetCaretPosition（txtarea）{
pos=0；
if（文档选择）{
//获取当前选择
var range=document.selection.createRange（）；
如果（范围.文本.长度>0）
len=range.text.length；
//全方位
var rangeFull=document.body.createTextRange（）；
满了。
function pasteIntoInput(text) {
el=document.getElementById("text");
el.focus();
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number" && el.selectionStart != el.selectionEnd) {
var val = el.value;
var selStart = el.selectionStart;
el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
el.selectionEnd = el.selectionStart = selStart + text.length;
}
else
el.value += text;
}
<script type="text/javascript">
var pos = 0;
var len = 0;
function pasteIntoInput(text) {
var el = document.getElementById("text");
el.focus();
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
var val = el.value;
var selStart = el.selectionStart;
el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
el.selectionEnd = el.selectionStart = selStart + text.length;
}
else if (typeof document.selection != "undefined") {
//var textRange = document.selection.createRange();
var textRange = el.createTextRange();
// el.focus();
if (len > 0) { //something selected, so replace
textRange.collapse(true);
textRange.moveEnd('character', pos+len);
textRange.moveStart('character', pos);
textRange.select();
textRange.text = text;
}
else {
textRange.collapse(true);
textRange.moveEnd('character', pos);
textRange.moveStart('character', pos);
textRange.text = text;
textRange.select();
}
el.focus();
}
}
function GetCaretPosition(txtarea) {
pos = 0;
if (document.selection) {
// get current selection
var range = document.selection.createRange();
if (range.text.length>0)
len=range.text.length;
// get full range
var rangeFull = document.body.createTextRange();
rangeFull.moveToElementText(txtarea);
var sel_start;
for (sel_start = 0; rangeFull.compareEndPoints('StartToStart', range) < 0; sel_start++) {
rangeFull.moveStart('character', 1);
}
pos = sel_start;
}
}
</script>
// Cross browser plugins to set or get selection/caret position in textarea, input fields etc for IE7,IE8,IE9, FF, Chrome, Safari etc
$.fn.extend({
// Gets or sets a selection or caret position in textarea, input field etc.
// Usage Example: select text from index 2 to 5 --> $('#myTextArea').caretSelection({start: 2, end: 5});
// get selected text or caret position --> $('#myTextArea').caretSelection();
// if start and end positions are the same, caret position will be set instead o fmaking a selection
caretSelection : function(options)
{
if(options && !isNaN(options.start) && !isNaN(options.end))
{
this.setCaretSelection(options);
}
else
{
return this.getCaretSelection();
}
},
setCaretSelection : function(options)
{
var inp = this[0];
if(inp.createTextRange)
{
var selRange = inp.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', options.start);
selRange.moveEnd('character',options.end - options.start);
selRange.select();
}
else if(inp.setSelectionRange)
{
inp.focus();
inp.setSelectionRange(options.start, options.end);
}
},
getCaretSelection: function()
{
var inp = this[0], start = 0, end = 0;
if(!isNaN(inp.selectionStart))
{
start = inp.selectionStart;
end = inp.selectionEnd;
}
else if( inp.createTextRange )
{
var inpTxtLen = inp.value.length, jqueryTxtLen = this.val().length;
var inpRange = inp.createTextRange(), collapsedRange = inp.createTextRange();
inpRange.moveToBookmark(document.selection.createRange().getBookmark());
collapsedRange.collapse(false);
start = inpRange.compareEndPoints('StartToEnd', collapsedRange) > -1 ? jqueryTxtLen : inpRange.moveStart('character', -inpTxtLen);
end = inpRange.compareEndPoints('EndToEnd', collapsedRange) > -1 ? jqueryTxtLen : inpRange.moveEnd('character', -inpTxtLen);
}
return {start: Math.abs(start), end: Math.abs(end)};
},
// Usage: $('#txtArea').replaceCaretSelection({start: startIndex, end: endIndex, text: 'text to replace with', insPos: 'before|after|select'})
// Options start: start index of the text to be replaced
// end: end index of the text to be replaced
// text: text to replace the selection with
// insPos: indicates whether to place the caret 'before' or 'after' the replacement text, 'select' will select the replacement text
replaceCaretSelection: function(options)
{
var pos = this.caretSelection();
this.val( this.val().substring(0,pos.start) + options.text + this.val().substring(pos.end) );
if(options.insPos == 'before')
{
this.caretSelection({start: pos.start, end: pos.start});
}
else if( options.insPos == 'after' )
{
this.caretSelection({start: pos.start + options.text.length, end: pos.start + options.text.length});
}
else if( options.insPos == 'select' )
{
this.caretSelection({start: pos.start, end: pos.start + options.text.length});
}
}
});