Question

我有以下代码，我从其他网站获得。我遇到的问题是它只显示第一个文本字段的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。

Answer 1

取决于您的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，请查看一些工具提示插件。

http://flowplayer.org/tools/tooltip/index.html

http://jquery.bassistance.de/tooltip/demo/

以下列出了30个：

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

工具提示仅适用于一个文本字段

1 个答案: