2012-01-06 11 views
0

の前または後にテキストラベルを置き換えます。私はラベルで、いくつかの入力タグを持つHTMLでinputタグ

<label>Address <input type="text" name="address" /></label> 
<label><input type="text" name="surname" /> Surname</label> 

を私はjavascriptのfuncionとラベルのテキストを変更したいです。
私はそれが可能であることを知っています。不都合なことに、入力前と入力後の両方にラベルが付いています。だからfirstChildとlastChild。

ラベルを<span>に入れてgetElementByIdを使用することは可能です。しかし、私は好まない。
ラベルにidまたはforを追加することもできますが、私は好まないでしょう。

「最初のTextNode兄弟の前後の入力」をどのように簡単に置き換えることができますか?

答えて

1

を参照してください。

var replaceText = function(inputName, newText) { 
    var TEXT_NODE = 3, 
     input_name = document.getElementsByName(inputName)[0], 
     nodes = input_name.parentNode.childNodes; 

    for (i = 0; i < nodes.length; i++) { 
     if (nodes[i].nodeType === TEXT_NODE) { 
      nodes[i].nodeValue = newText; 
      break; 
     } 
    } 
}; 

replaceText("address", "Not an Address"); 
replaceText("surname", "Not a Surname"); 

Example on jsfiddle

+0

ありがとう、非常に良い。 なぜ '== 3'ではなく' nodeType === 3'と厳密に同じですか? – Salvador

+0

「==」と「===」についてのこの回答を見るhttp://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-use –

0

生のJavascriptを使用する代わりに、JQueryのようなクロスブラウザのフレームワークを使用することを強くお勧めします。その後、Jqueryで:

$('input').bind("keyup", function(event) { 
    var textNodes = $(this).parent().contents().filter(function() { 
     return this.nodeType == Node.TEXT_NODE; 
    }); 
    textNodes.each(function() { this.nodeValue = "bla"; }); 
}); 

ここでのデモ:http://jsfiddle.net/Hh33v/6/

あなたは、childNodesを反復処理TEXT_NODEの最初のインスタンスを検索し、テキストを置き換えることができhttp://api.jquery.com/filter/http://api.jquery.com/contents/

+0

仕事、http://jsfiddle.net/markcoleman/sc4g8/は表示されません。さらに、入力の前後に出現する 'TEXT_NODE'を置き換えたいという疑問から、 '.html()'を使うと ' 'も破壊されます。 –

+0

ああ、質問を間違えた。更新された例。 –