1. ホーム
  2. 質問と答え
  3. iframeの内部でreplaceメソッドを使用するJavascript

iframeの内部でreplaceメソッドを使用するJavascript

2016-01-05 26 views
8

iframeの中の突然の単語を置き換えることができるのだろうかと思います。iframeの内部でreplaceメソッドを使用するJavascript

iframeのコンテンツを同じ内容で置き換えて入れ替えるためにjQueryを使用しました。ここでの問題は、 'カーソルが入力フィールドの先頭にリセットされるため、最初から書き直す必要があります。あなたはカーソルのリセットなしのiframe内のコンテンツの一部を置き換えることができれば、あなたが入力したときに当然のではないので、それはちょうど最初から開始しますので、ここで

、私は質問がある

<html> 
<head> 
<script> 
function iFrameOn(){ 
    richTextField.document.designMode = 'On'; 
} 

</script> 
</head> 
<body onLoad="iFrameOn();"> 

<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it --> 
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> 
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:100px; height:20px;"> 
</iframe> 
<!--End replacing your normal textarea --> 
</p> 
<script> 
     function ReplaceWords(){ 
      var textfield = document.getElementById("richTextField"); 

      textfield.contentWindow.document.body.onkeyup = function(e){ 
       var content = textfield.contentWindow.document.body.innerHTML; 
       var Fixed_Content = content.replace("hey", "yo"); 
       $(document).ready(function() { 
        $('#richTextField').contents().find('body').html(Fixed_Content); 
       }); 
      }; 
     }; 
     ReplaceWords(); 
</script> 

</body> 
</html>

をやったことあります再び。

更新：基本的には、フォーカスしているテキストエリアではなく、iframe内に隠されているため、document.designMode = 'On';を使用します。

私は再び投稿を更新しました。これは最初からどうなっていたのでしょうか。 jsfiddleする要求されたリンクとして

：同じドメイン内のiFrame での作業 https://jsfiddle.net/tqf3v2sk/8/

出典

2016-01-05 Frederik

+0

あなたは '余分を持っています;'。あなたはそれを定義する前に 'Hello（）'を呼び出します。 'onmouseenter'イベントを使うか、間隔を設定してこれを行うことができます。例を示すことは素晴らしいことです。 –

+0

ありがとうございますが、マウスを使用している場合は、書き込み中はリアルタイムではありません。 – Frederik

+0

iframeであなたを理解していれば、入力フィールドを読み込み、ユーザーが入力したテキストの一部を置き換えようとすると入力します。はいの場合、入力フィールドの値を更新済みのものに置き換えることも、HTMLタグを置き換えることもできません。記述された問題の全体的な文書置換の原因です。そうでなければ、タグ置換が必要なものだけであれば、コンテンツの変更後に入力フィールドにフォーカスメソッドを呼び出すことができます。 –

答えて

2

が大きく異なるDOM要素での作業からではありません。使用するメソッドが適切なウィンドウとドキュメントオブジェクトで呼び出されていることを確認するだけです。しかし、ウィンドウとドキュメントを正しくターゲティングしたら、スクリプトと同じウィンドウにあるのと同じように親ウィンドウから呼び出すことができます。

入力中に置換する方法として、いくつかの方法があります。 1つの方法は、document.execCommand（ 'insertText'）との選択を使用することです。入力するキーが置換する単語の最後の文字と一致するかどうかを検出します。置換する単語の長さを選択し、一致するかどうかを確認します。一致した場合は、execCommandを呼び出すと、置換の最後にカーソルを置いたまま置き換えられます。

function replaceOnKeyDown(e, toReplace, replaceWith) { 

    var iptFld = e.target; 
    var lastLetter = toReplace[toReplace.length - 1]; 
    var keyEntered = String.fromCharCode(e.keyCode); 
    console.log(keyEntered) 
    // To make it more efficient, you can call the rest only if the 
    // key just pressed is the same as the last of the word you 
    // need to replace. 
    if (lastLetter.toLowerCase() === keyEntered.toLowerCase()) { 
    // Set selection to your word length 
    var range = frameWindow.getSelection().getRangeAt(0); 
    var caretPosition = range.startOffset; 
    // Since you're on key down, the caret position is before the 
    // last letter is entered. 
    var toReplaceStart = caretPosition - toReplace.length + 1; 

    range.setEnd(range.startContainer, caretPosition); 
    range.setStart(range.startContainer, toReplaceStart); 
    frameWindow.getSelection().addRange(range); 
    // Check if the selection matches the word to replace 
    // Since you're on mouse down, the range will only include 
    // up until the letter being entered. So you need to validate 
    // that the word without the last letter equals 
    // the selection. 
    if (range.toString() + lastLetter === toReplace) { 

     frameDocument.execCommand('insertText', false, replaceWith); 
     // prevent last letter to be entered 
     e.preventDefault(); 

    } else { 

     frameWindow.getSelection().collapse(range.startContainer, caretPosition); 

    } 
    } 
} 

var textfield = document.getElementById("richTextField"); 
var frameWindow = textfield.contentWindow 
var frameDocument = frameWindow.document 
frameDocument.designMode = 'on' 
frameDocument.body.onkeydown = function(e) { 
    replaceOnKeyDown(e, 'hey', 'yo') 
};

https://jsfiddle.net/k0qpmmw1/6/

出典

2016-01-10 17:04:12

+1

こんにちは、遅い応答を申し訳ありませんが、これはすでに隠されている