Javascript Text mit Bild ersetzen Textbox ausschließen

-1

Wie bekomme ich es, den Text auf Textboxeingaben nicht zu ersetzen? Es macht es nicht während der Eingabe, aber wenn Sie ein Dokument oder ein Eingabefeld bearbeiten, das die ersetzten Informationen enthält, wird es bearbeitet und es ist unmöglich, es zu bearbeiten.Javascript Text mit Bild ersetzen Textbox ausschließen

Ich habe versucht, es zu tun, aber es schaltet nur das gesamte Skript aus. xD

<script type='text/javascript'> 
     document.body.innerHTML = document.body.innerHTML.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Zero.png" title="E"/>'); 
     document.body.innerHTML = document.body.innerHTML.replace(/E10/g, '<img src="http://s31.postimg.org/6wm82qo8r/ten.png" title="E"/>'); 
     document.body.innerHTML = document.body.innerHTML.replace(/E20/g, '<img src="http://s31.postimg.org/4j4abq9tn/twenty.png"title="E"/>'); 
     document.body.innerHTML = document.body.innerHTML.replace(/E30/g, '<img src="http://s31.postimg.org/mzyp2jprv/thirty.png"title="E"/>'); 
     document.body.innerHTML = document.body.innerHTML.replace(/E40/g, '<img src="http://s31.postimg.org/j4vazz6m3/forty.png"title="E"/>'); 
    </script>

Hier ist ein Bild des Problems ich auf der Webseite zu sehen:

Quelle

2016-06-15 Christopher Thompson

Es ist überhaupt nicht klar, was Sie zu tun versuchen. Ich verstehe, dass Englisch wahrscheinlich nicht Ihre Muttersprache ist (Hinweis: Ich glaube nicht, dass "excluside" ein echtes Wort ist ...) Ich würde auch nicht das Wort 'it' verwenden. Es ist nicht klar, worauf sich das Pronomen bezieht. Haben Sie Ihr Beispiel im Chrome-Browser mithilfe von Entwicklertools ausprobiert? Ich vermute, Sie haben Fehler, die das Skript blockieren. Die Chrome Developer Tools werden Ihnen genau sagen, was die Fehler sind. Außerdem könnten Sie JSFiddle verwenden, um uns zu zeigen, was Ihr Problem mit Beispielcode ist. – zipzit

Sie erwähnen Textbox in den Tags und im Titel, aber ich sehe keine Textbox irgendwo in Ihrem Code. Was versuchst du zu machen? Was möchten Sie dem Nutzer Ihrer Webseite zeigen? – zipzit

Das war ein Tippfehler. Behoben.> __> Der Code hat keinen Fehler. Ich brauche es, um Textbox-Eingaben nicht zu bewirken. Jede Textbox mit dem Text, der in ein Bild ersetzt wird, sieht etwa so aus: http://s31.postimg.org/b21q2ebej/screenshot_37.png Ich kann nicht herausfinden, wie man Textbox-Eingabefelder nicht ohne Drehen beeinflussen kann das gesamte Skript wird dabei deaktiviert. –

Sie document.querySelectorAll() mit Selektor-String "body *" können alle Elemente außer <body> auszuwählen; for Schleife; ausschließen <input> Elemente aus einzelnen .replace() Aufruf durch Filtern INPUT.tagName Eigenschaft bei if Zustand

<div>E0 E10 E20 E30 E40</div> 
 
<input type="text" value="E40" /> 
 
<script type='text/javascript'> 
 
    var elems = document.querySelectorAll("body *"); 
 
    var url = "http://s31.postimg.org/"; 
 
    for (var i = 0; i < elems.length; i++) { 
 
    if (elems[i].tagName !== "INPUT") { 
 
     elems[i].innerHTML = elems[i].innerHTML 
 
     .replace(/(E0)|(E10)|(E20)|(E30)|(E40)/g 
 
     , function(match, p1, p2, p3, p4, p5) { 
 
      if (p1) return "<img src=" + url 
 
      + "5riz5vn0b/Zero.png title=E/>"; 
 
      if (p2) return "<img src=" + url 
 
      + "6wm82qo8r/ten.png title=E/>"; 
 
      if (p3) return "<img src=" + url 
 
      + "4j4abq9tn/twenty.png title=E/>"; 
 
      if (p4) return "<img src=" + url 
 
      + "mzyp2jprv/thirty.png title=E/>"; 
 
      if (p5) return "<img src=" + url 
 
      + "j4vazz6m3/forty.png title=E/>"; 
 
     }) 
 
    } 
 
    } 
 
</script>

Quelle

2016-06-15 02:48:09 guest271314

Dies ändert immer noch den Inhalt von Eingabefeldern. Es ist etwas besser, weil es mir erlaubt, mit ihm zu interagieren, aber es ändert es zum HTML, das es auf dem Benutzerende schwierig macht. Http://s31.postimg.org/6hfjngrp7/screenshot_38.png –

@ChristopherThompson _ "Dies ändert immer noch den Inhalt von Eingabefeldern." _ Kannst du ein jsfiddle http://jsfiddle.net erstellen, um es zu demonstrieren? Der Wert "input" -Element bei stacksnippets scheint hier nicht geändert zu werden. – guest271314

Ja, ich spiele damit in Jsfiddle und es macht erstmal nichts damit durch. Aber sobald der Benutzer den "Senden" -Knopf drückt und diese Seite erneut lädt, ändert sich das Eingabefeld. http://s31.postimg.org/lrfeunn7f/screenshot_39.png <- Wie So. Das Jsfiddle erlaubt mir nicht, ein Eingabefeld zu erstellen, das die Informationen speichert und zu einem späteren Zeitpunkt angezeigt wird, damit es vom Skript beeinflusst wird. Vielleicht wäre es einfacher, das Skript nicht auf bestimmten Seiten laufen zu lassen. –

Ein alternatives Verfahren könnte das Dokument für Textknoten zu suchen, die enthalten E0, E10, E20, E30, E40, überspringt die Kindknoten von TEXTAREA- und INPUT-Elementen und ersetzt alle Textknoten, die bei einem Element bleiben, das Text und Bilder enthält.

Dies sollte ein potenzielles Problem vermeiden, die innerHTML von Container-Elementen ersetzen, die Elemente in ihnen haben, die unverändert bleiben müssen. Während der folgende Code in IE und Firefox ausgeführt wird, wurde er nicht im vollen Kontext Ihrer Anwendung getestet.

function textToImages() // within document.body 
{ 
    var checkAny = /E0|E10|E20|E30|E40/g; 
    function filter(node) 
    { checkAny.lastIndex=0; 
     if(checkAny.test(node.nodeValue)) 
     { switch(node.parentNode.tagName) 
      { case "INPUT": 
       case "TEXTAREA": 
        return NodeFilter.FILTER_SKIP; 
      } 
      return NodeFilter.FILTER_ACCEPT; 
     } 
     return NodeFilter.FILTER_SKIP; 
    } 
    filter.acceptNode = filter; // cross browser compatability 
    var scan = document.createNodeIterator(
     document.body, 
     NodeFilter.SHOW_TEXT, 
     filter, 
     false 
    ); 
    var node, replaceList=[]; 

    document.body.normalize(); 
    while(node = scan.nextNode()) 
     replaceList.push(node); 
    if(replaceList.length) 
     replaceList.forEach(replaceTextNode); 

    function replaceTextNode(node) 
    { var html = node.nodeValue; 
     var span = document.createElement("span"); 
     html=html.replace(/E0/g, '<img src="http://s31.postimg.org/5riz5vn0b/Zero.png" title="E"/>'); 
     html=html.replace(/E10/g, '<img src="http://s31.postimg.org/6wm82qo8r/ten.png" title="E"/>'); 
     html=html.replace(/E20/g, '<img src="http://s31.postimg.org/4j4abq9tn/twenty.png" title="E"/>'); 
     html=html.replace(/E30/g, '<img src="http://s31.postimg.org/mzyp2jprv/thirty.png" title="E"/>'); 
     html=html.replace(/E40/g, '<img src="http://s31.postimg.org/j4vazz6m3/forty.png"title="E"/>'); 
     span.innerHTML = html; 
     node.parentNode.replaceChild(span, node); 
    } 
}

A NodeIterator wird verwendet, um Text Knoten in dem DOM zu scannen, für die Entstörung, den Text ersetzt werden, enthalten, die keine untergeordneten Knoten TEXTAREA- oder INPUT Elemente, und schafft eine statische Liste von Knoten zu sein verarbeitet.

Ich hatte Probleme mit document.createNodeIterator in IE, die mindestens 4 Parameter erfordert und erfordert seinen 3. Parameter als eine Funktion. Wenn Sie auf Probleme in anderen Browsern stoßen, würde ich vorschlagen, benutzerdefinierte DOM-Traversal und Filter-Code zu schreiben, um die Verwendung von NodeIterator insgesamt zu vermeiden.

Textknoten, die den Filter durchlaufen haben, werden durch ein SPAN Element ersetzt, das null oder mehr Textknoten und ein oder mehrere Bildelemente enthält. Die Knotenaustauschfunktion verwendet grundsätzlich den in der Frage angegebenen Code. Während es möglich sein sollte, einen einzelnen Textknoten durch einen oder mehrere Text- und Bildknoten zu ersetzen, ohne einen Container zu verwenden, würde es zusätzliche Codierung erfordern, um DOM-Elemente zu erzeugen und zu manipulieren.

Quelle

2016-06-16 03:02:58 traktor53

Javascript Text mit Bild ersetzen Textbox ausschließen

Antwort

Verwandte Themen