之前或输入标签

在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

之前或输入标签

回答

相关问题