将光标放在带有JavaScript的iframe主体元素中的文本末尾

Place cursor at the end of text in an iframe body element with JavaScript

本文关键字：元素 主体 文本 iframe JavaScript 光标      更新时间：2023-09-26

我首先要道歉，因为这可能看起来像或实际上是重复的，但我已经尝试了我遇到的每一个解决方案，似乎都不适合我。

在我的HTML中，我有一个iframe引用了另一个HTML文档。使用JavaScript，在按下按钮列表时，我会将文本插入到iframe的主体中。我还使用JavaScript来保持对iframe主体的关注。问题是，每次按下这些按钮时，似乎都无法将光标移动到文本的末尾，它总是移动到开头。

我尝试过的解决方案之一是将此代码添加到处理按钮按下的功能中：

iFrameBody.focus();
var content = iFrameBody.innerHTML;
iFrameBody.innerHTML = content;

所以函数看起来是这样的：

function typeIn(buttonId) {
    var iFrameBody = document.getElementById("iFrame").contentWindow.document.body;
    iFrameBody.innerHTML += buttonId;
    iFrameBody.focus();
    var content = iFrameBody.innerHTML;
    iFrameBody.innerHTML = content;
}

我尝试过的另一件事是，在我的iframe引用的HTML文件中：

<body onfocus="this.innerHTML = this.innerHTML;"></body>

我尝试了其他几个更复杂的解决方案，坦率地说，我甚至不太理解，但都无济于事。任何帮助都将不胜感激。

我想明白了。问题是，我使用了一个body元素，编写到它的innerHTML，并试图将重点放在body上。通过简单地在iFrame中使用文本区域，它变得非常简单，只需要最简单的代码。

这是为了在页面加载时设置焦点：

window.onload = function () {
    var iFrameTextArea = document.getElementById("iFrame").contentWindow.document.getElementById("iFrameTextArea");
    iFrameTextArea.focus();
}

然后将按钮设置为在保持焦点的同时写入文本区域：

function typeIn(buttonId) {
    var iFrameTextArea = document.getElementById("iFrame").contentWindow.document.getElementById("iFrameInput");
    iFrameTextArea.focus();
    iFrameTextArea.value += buttonId;
}

超级简单！！

您也可以使用以下代码来解决这个问题，而不是在iframe中再次使用textarea。

var iframeElement = document.getElementById("iFrame").contentWindow.document.body;
            iframeElement.focus();
            var len = iframeElement.length ;
            iframeElement.setSelectionRange(len, len);
相关文章：