Question

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

中

我认为我在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>

再次感谢你们！

Answer 1

我不确定为什么你需要javascript ...

当输入为.hint sed时，我所做的显示提示是影响: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过渡like this来设置它的动画效果

表格通知html css

1 个答案: