2015-11-25 74 views
0

我会以道歉开始,因为这看起来好像或实际上是重复的,但我试过了我遇到的每个解决方案,而且似乎都没有为我工作。将光标放置在JavaScript中的iframe正文元素中的文本末尾

在我的HTML中,我有一个引用另一个HTML文档的iframe。使用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> 

我试了几个oth坦率地说,我并不是很坦白地说,这些解决方案都比较复杂,都无济于事。任何帮助将非常感激。

+0

你可能把它放在小提琴里吗? –

+0

感谢您看看这个问题。 [fiddle](https://jsfiddle.net/rrtpda1f/1/)在这里,我不知道这将是多么有用,因为我无法弄清楚如何添加引用的iframe html文件。不过,对于这个问题可能的解决方案的任何想法?我仍然无法解决它。 –

+0

看到这是你的任何帮助:http://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ –

回答

0

我想通了。问题是我正在使用一个body元素,写入它的innerHTML并试图将焦点放在body上。通过简单地在我的iFrame中使用textarea,它变得非常简单,它只需要最简单的代码。

这将焦点设置在页面加载时:

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; 

} 

超级简单!

相关问题