工具提示只能在一个文本字段上工作

我有我从另一个网站获得的以下代码。我遇到的问题是它只显示onclick的第一个文本字段。所有其他文本框不起作用。工具提示只能在一个文本字段上工作

我没有打扰发布的CSS不需要修复我相信。

基本上显示一个文本字段我必须把下面的代码每个文本框

<span class="hint">This is a hint">&nbsp;</span></span>

这里正下方是JavaScript：

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     oldonload(); 
     func(); 
    } 
    } 
} 

function prepareInputsForHints() { 
var inputs = document.getElementsByTagName("input"); 
for (var i=0; i<inputs.length; i++){ 
    // test to see if the hint span exists first 
    if (inputs[i].parentNode.getElementsByTagName("span")[0]) { 
     // the span exists! on focus, show the hint 
     inputs[i].onfocus = function() { 
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; 
     } 
     // when the cursor moves away from the field, hide the hint 
     inputs[i].onblur = function() { 
      this.parentNode.getElementsByTagName("span")[0].style.display = "none"; 
     } 
    } 
} 
// repeat the same tests as above for selects 
var selects = document.getElementsByTagName("select"); 
for (var k=0; k<selects.length; k++){ 
    if (selects[k].parentNode.getElementsByTagName("span")[0]) { 
     selects[k].onfocus = function() { 
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; 
     } 
     selects[k].onblur = function() { 
      this.parentNode.getElementsByTagName("span")[0].style.display = "none"; 
     } 
    } 
} 
} 
addLoadEvent(prepareInputsForHints);

我喜欢，因为它正是我想要的工具提示因为它显示一个<（横向三角形），因此它指向所选的文本框。

我想也许使用jQuery，但因为我没有JS/jQuery的知识不知道如何使它，所以它使用CSS我目前的工具提示。

来源

2011-01-23 PHPLOVER

为什么你对`'两个关闭的标签？每个'`周围的标记的剩余部分是什么样的？ – Pointy 2011-01-23 16:39:59

嗨，我不确定它基本上是工具提示的代码，我发布的代码是javascript和显示工具提示的html。除此之外，还有CSS的造型。我在网上找到它。 – PHPLOVER 2011-01-23 16:40:56

取决于您的HTML标记。每个量程/输入对必须位于其自己的容器中。

例子：http://jsfiddle.net/E7ZME/

<div><input><span class="hint">This is a hint"&nbsp;</span></div> 
<div><input><span class="hint">This is a hint"&nbsp;</span></div> 
<div><input><span class="hint">This is a hint"&nbsp;</span></div>

我没有改变任何您发布的JavaScript的。我只使用这个HTML和一点CSS。

编辑：

如果你打算使用jQuery，检查出一些提示插件。

下面是他们的30名单：

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

来源

2011-01-23 16:41:30 user113716

工具提示只能在一个文本字段上工作

回答

相关问题