0

我正在尝试创建一个表单，一旦用户专注于输入字段，就会出现验证提示。我最初是为不同的网站创建的，但在将其转换为在不同的网站中运行时遇到了麻烦。表单提示位于 .

我想我在 CSS 标记中遗漏了一些东西，如果有人有任何想法，我将不胜感激。

任何帮助将不胜感激，在此先感谢。

这是HTML

    <body>
<div id="container">
<div id="mast-head">
<div id="portal-logo"></div>
<div id="ramsay-logo"></div>
</div>
<div id="nav"><div id="logout"><a href="#">Log Out</a></div><a href="#"><img src="images/home-icon.jpg" width="20" height="20" /></a><span class="breadcrumb">Login</span><span class="breadcrumb">Your Treatment</span>
</div>
<div id="form-content">
    <fieldset>
        <form name="your-treatment" action="" method="post">
            <ul>
                <li>
                    <label for="email">Proposed operation</label>
                    <input type="text" name="email" />
<span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer">&nbsp;</span></span>
                </li>
            </ul>
        </form>
    </fieldset>
</div>
</div>
</body>

这是CSS

    .hint {
    display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(pointer.gif) no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}

这是Javascript...

<script type="text/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);
</script>

再次感谢各位！

4

1 回答 1

0

我不知道你为什么需要javascript来做这个......

当输入是sed时，我为显示提示所做的操作是影响.hint的属性。:focus您所要做的就是按照您希望的方式对其进行样式设置。jsFiddle

input:focus + .hint {
    position: absolute;
    display:block;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(pointer.gif) left top no-repeat;
}

此外，如果您有多个输入，您可以使用类而不是通用input标签来影响它们

哎呀，如果您愿意，您甚至可以使用像这样的不透明度和 CSS 过渡为其设置动画

于 2013-08-20T21:18:34.763 回答