Javascriptでテキストを画像に置き換えるテキストボックスの入力を除外

-1

テキストボックス入力のテキストを置き換えないようにするにはどうすればよいですか？入力中には行いませんが、置き換えられた情報を含む文書や入力フィールドを編集すると編集できなくなります。Javascriptでテキストを画像に置き換えるテキストボックスの入力を除外

私はそれをやろうとしましたが、スクリプト全体がオフになりました。 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>

ここでは、私は、Webページ上に表示問題の画像です：

出典

2016-06-15 Christopher Thompson

あなたがしようとしていることはまったくわかりません。私は英語がおそらくあなたの母国語ではない（ヒント：私は「排他的」は本当の言葉ではないと思う...）私は「it」という言葉を使わないだろう。その代名詞が何を指しているのかははっきりしていない。デベロッパーツールを使用してChromeブラウザでサンプルを試しましたか？私はあなたがスクリプトをロックするエラーがあると思います。 Chromeデベロッパーツールは、エラーの内容を正確に伝えます。また、JSFiddleを使用して、サンプル・コードで問題がどのようなものであるかを示すこともできます。 – zipzit

あなたはタグとタイトルの中にtextboxを記述していますが、コードのどこにでもテキストボックスは表示されません。あなたは何をしようとしているのですか？何をあなたのウェブページのユーザに見せようとしていますか？ – zipzit

それはタイプミスでした。修正しました。> __> コードにエラーはありません。私はそれがテキストボックスの入力を無効にする必要があります。画像に置き換えられるテキストを含むテキストボックスは、次のようになります。 http://s31.postimg.org/b21q2ebej/screenshot_37.png テキストボックスの入力フィールドを非表示にする方法を理解できませんその過程でスクリプト全体がオフになります。 –

あなたは<body>以外のすべての要素を選択するセレクタ文字列"body *"でdocument.querySelectorAll()を使用することができます。 forループ;別の方法は、E0、E10、E20、E30を含むテキスト・ノードのための文書を検索するかもしれない

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

出典

2016-06-15 02:48:09 guest271314

これは依然として入力フィールドの内容を変更しています。それは私がそれと対話することができますが、それはHTMLに変更されているので、ユーザー側では難しくなります.http：//s31.postimg.org/6hfjngrp7/screenshot_38.png –

@ChristopherThompson _ "これはまだ入力フィールドの内容を変更しています。" _ jsfiddle http://jsfiddle.netを作成してデモンストレーションできますか？ stacksnippetsの 'input'要素の値はここでは変更されていません。 – guest271314

ええ、私はそれをJsfiddleでプレイしていますが、最初はそれを乱すことはありません。しかし、ユーザーが「送信」ボタンを押してそのページを再度ロードすると、入力フィールドが変更されます。 http://s31.postimg.org/lrfeunn7f/screenshot_39.png < - そうそう。 Jsfiddleは、情報を格納する入力フィールドを作成することを許可しません。後でスクリプトによって影響を受けることがあります。スクリプトを特定のページで実行しない方が簡単かもしれません。 –

if条件でINPUT.tagNameプロパティをフィルタリングすることにより、単一の.replace()コールから<input>の要素を除外し、 E40、TEXTAREA子要素とINPUT要素の子ノードをスキップし、テキストファイルと画像を含む要素が残っているテキストノードをそれぞれ置き換えます。

これにより、内部に要素を持つコンテナ要素のうち、変更しないままにする必要があるコンテナ要素のinnerHTMLを置き換える可能性のある問題を回避する必要があります。次のコードはIEとFirefoxで動作しますが、アプリケーションの完全なコンテキストでテストされていません。

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); 
    } 
}

NodeIteratorがあることをTEXTAREAやINPUT要素の子ノードされていないテキストを置換する含まれているもののためにフィルタリング、DOMのテキストノードをスキャンするために使用され、ノードの静的リストを作成しています処理される。

少なくとも4つのパラメータが必要なIEではdocument.createNodeIteratorに問題があり、3番目のパラメータが関数である必要があります。他のブラウザで問題が発生した場合は、NodeIteratorを使わないように、カスタムDOMトラバーサルとフィルタリングコードを書くことをお勧めします。

フィルタを通過したテキストノードは、0個以上のテキストノードと1つ以上のイメージ要素を含むSPAN要素に置き換えられます。ノード置換機能は基本的に質問に掲示されたコードを使用します。コンテナを使用せずに、1つのテキストノードを1つ以上のテキストノードとイメージノードに置き換えることは可能ですが、DOM要素を作成して操作するには追加のコーディングが必要になります。

出典

2016-06-16 03:02:58 traktor53

Javascriptでテキストを画像に置き換えるテキストボックスの入力を除外

答えて

関連する問題