Question

我正在创建一个网站，我遇到了编码困境。

我正在写一个'提交表单'，我需要它看起来像下面的例子：

消息:(允许用户提交消息或输入任何评论）在文本框内，我想说“在此处键入您的消息”，但是当您在框中单击时，'类型你的消息在这里'消失了。我还希望能够控制这个文本框的大小。名称：在此输入您的名字和姓氏（我希望它的功能与上面相同）电子邮件地址：在此处输入您的电子邮件地址:(同样，功能与上述相同）

这是我到目前为止的代码，我不确定它是否正确，因为我正在尝试做的事情：

<form method="post" action="mailto:youremail@youremail.com" >

<b>Message:</b><br><input type="textbox" value="text_name" onfocus="if (this.value=='Text_name') this.value='';" style="width: 300px;" style="height: 300px;"/><br/>

<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" /><br />

<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" /><br />

<input type="submit" value="Send Email" /> 

</form>

Answer 1

这有很多插件可供使用。但是您可以使用HTML5属性“占位符”

<input type="text" placeholder="Enter your name...">

HERE 是演示版。当您开始输入时，文字/提示会显示。

<b>Message:</b><br><input type="textbox" placeholder="Type your message here"   style="width: 300px;" style="height: 300px;"/><br/>

<b>Name:</b><br><input type="text" name="First and Last" size="30" maxlength="30" placeholder="Type your first and last name here" /><br />

<b>Email:</b><br><input type="text" name="Email" size="24" maxlength="24" placeholder="Type your email address here"/><br />

<input type="submit" value="Send Email" />

Answer 2

根据我的理解，这几乎是重复的：Onclick event to remove default value in a text input field对吗？

如果您对HTML5没问题，那么您可以使用placeholder，否则您需要使用删除文字的{Javascript onblur

Answer 3

我建议您使用bootstrap css来获得更好的样式。看看这个http://getbootstrap.com/css/。我希望这会对你有所帮助

Answer 4

您可以定义脚本并使用以下功能，因为它可用于onfocus和onblur，

function clearText(field) {
    if(field.defaultValue == field.value) {
        field.value = “”;
    }
    else
        if(field.value == “”) {
            field.value = field.defaultValue;
        }
}

HTML - 使表单值消失，并控制文本输入的高度和宽度

4 个答案: