之前或輸入標籤

在HTML我有一些標籤輸入標記後替換文本標籤：之前或輸入標籤

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

我想更改標籤文本與一個javascript funcion。
我知道這是可能的，例如。與

input_name.parentNode.firstChild.nodeValue = "New label text";

不幸的標籤是輸入前後。所以firstChild以及lastChild。

我知道可以將標籤放入<span>並使用getElementById。但我不喜歡。
也許還可以將id或for添加到標籤...但我不喜歡。

如何輕鬆地替換「輸入之前或之後的第一個TextNode兄弟」？

來源

2012-01-06 Salvador

你可以遍歷的childNodes，找到一個TEXT_NODE的第一個實例，並替換文本。

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

來源

2012-01-06 12:54:46

謝謝，非常好。爲什麼嚴格等於'nodeType === 3'而不是'== 3'？ – Salvador 2012-03-09 11:00:32

查看關於'=='和'==='的回答http://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-i-use – 2012-03-09 14:23:43

我強烈建議使用像JQuery這樣的跨瀏覽器框架而不是使用原始的Javascript。然後用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/

見http://api.jquery.com/filter/和http://api.jquery.com/contents/

來源

2012-01-06 12:54:16

不工作時，看到http://jsfiddle.net/markcoleman/sc4g8/。另外從他看來他想要替換在輸入之前或之後出現的TEXT_NODE。通過使用'.html（）'你也會銷燬''。 – 2012-01-06 13:02:34

啊，誤解了這個問題。更新的例子。 – 2012-01-06 13:05:16

之前或輸入標籤

回答

相關問題