现场标签插件不起作用 [英] In-field labels plugin not working

问题描述

我正在尝试在现场标签插件="http://sarahjanetrading.com/js/j/contact.html" rel ="nofollow">我的网页，但是该脚本无法正常工作(未显示现场标签).

I am trying to use the In-field labels plugin on the contact form of my webpage, but the script is not working (the in-field labels don't appear).

我的表格也存在定位问题，我已经尝试了一段时间，但徒劳无功.这是我的代码:

Also my form has positioning problems that I have been trying to work with for a while but in vain. Here is my code:

$(function(){
    $("label").inFieldLabels();
});

<form action="" method="get" name="contact-form" accept-charset="utf-8">
    <fieldset>
    <p>
        <label for="name">Name</label><br />
        <input type="text" name="name" value="Name" id="name">
    </p>
    <p>
        <label for="email">Email</label><br />
        <input type="text" name="email" value="Email" id="email">
    </p>
    <p>
        <label for="company">Company</label><br />
        <input type="text" name="company" value="Company" id="company">
    </p>
    <p>
        <label for="message">Message</label><br />
        <textarea name="message" id="message">Message</textarea>
    </p>
    </fieldset> 
    <input type="submit" value="Submit" id="submit-btn" />
    <input type="reset" value="Reset" id="reset-btn" />
</form>

推荐答案

您需要摆脱所有输入的值才能使其正常工作.它们应该是value="".

You need to get rid of the values of all inputs for this to work. They should be value="".

使用IE 9开发人员工具，我看到您在输入字段周围为<p>标记显示了以下CSS:

Using IE 9 Developer Tool, I see that you have the following CSS showing up for the <p> tag around the input fields:

body#contact .content #middle #right-col #form p {

left: -300px;
top: 22px;
color: #aaaaaa;
position:relative;

}

摆脱掉-300px.在IE中，它会将输入字段推离表单.

Get rid of that -300px. In IE it pushes the input fields off the form.

好的，我想我已经解决了！除去<p>元素的left: -300px;偏移量，并将clear: both;添加到fieldset元素.我在IE和FF中对其进行了测试，它似乎工作正常.

Okay, I think I've fixed it! Get rid of the left: -300px; offset for the <p> elements and add a clear: both; to the fieldset element. I tested it in IE and FF and it seemed to work just fine.

这篇关于现场标签插件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！