1. Dom
  2. Pytanie i odpowiedź
  3. JavaScript za pomocą metody replace wewnątrz iframe

JavaScript za pomocą metody replace wewnątrz iframe

2016-01-05 13 views
8

Zastanawiam się, czy można zastąpić nagłe słowa wewnątrz iframe.JavaScript za pomocą metody replace wewnątrz iframe

Użyłem jQuery do zmiany zawartości wewnątrz iframe z tą samą zawartością, ale z zamiennikami. Problem polega na tym, że "kursor resetuje się" na początku pola wejściowego, więc musisz pisać od początku.

Więc oto co zrobiłem

<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>

Pytanie brzmi: czy można zastąpić niektóre treści wewnątrz iframe bez resetów kursora, ponieważ nie jest to doceniane podczas pisania i po prostu zaczyna się od początku jeszcze raz.

Aktualizacja: Zasadniczo nie jest to obszar tekstowy, który jest ostry, jest ukryty wewnątrz elementu iframe, dlatego używam document.designMode = 'On';.

Mam zaktualizowany post ponownie, tak powinien być od samego początku.

zgodnie z wnioskiem link jsfiddle: https://jsfiddle.net/tqf3v2sk/8/

Źródło

2016-01-05 Frederik

+0

Masz dodatkowy ';'. Wywołujesz 'Hello()' przed zdefiniowaniem go. Możesz użyć zdarzenia 'onmouseenter' lub ustawić interwał, aby to zrobić. Pokazanie przykładu byłoby świetne. –

+0

Dzięki, ale na mouseenter nie byłoby czasu rzeczywistego, podczas pisania. – Frederik

+0

Jeśli zrozumiałem cię poprawnie w iframe, ładujesz pole wejściowe, a gdy typy użytkownika próbujesz zastąpić niektóre części wprowadzonego tekstu. Jeśli tak, to możesz po prostu zamienić wartość pola wejściowego na zaktualizowaną, nie zastępując tagów html. Ponieważ cała przyczyna wymiany dokumentu opisanego problemu. W przeciwnym razie, jeśli zastępowanie znaczników jest dokładnie tym, czego potrzebujesz, możesz wywołać metodę skupienia w polu wprowadzania po zmianie treści. –

Odpowiedz

2

Praca z iFrames w tej samej domenie nie różni się zbytnio od pracy z elementów DOM. Musisz tylko upewnić się, że używane metody są wywoływane w odpowiednim obiekcie obiektu. Ale gdy już celujesz poprawnie, możesz wywoływać je z okna nadrzędnego w taki sam sposób, jakby znajdował się w tym samym oknie, co twój skrypt.

Jeśli chodzi o wymianę podczas pisania, można to zrobić na kilka sposobów. Jednym ze sposobów byłoby użycie document.execCommand ('insertText') i Wybór. Wykrywasz, czy wpisywany klucz pasuje do ostatniego znaku słowa, które ma zostać zastąpione, jeśli tak, wybierz długość słowa do zastąpienia i sprawdź, czy pasuje. Jeśli pasuje, wywołaj execCommand, a zastąpi go, pozostawiając kursor na końcu zamiennika.

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/

Źródło

2016-01-10 17:04:12

+1

Witam, przepraszam za opóźnioną odpowiedź, ale to zastępuje tekst wewnątrz