2015-11-25 73 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; 

} 

超級簡單!

相關問題