0

如您所知，我想在单击文本框时删除它的默认值，此代码有效。但是，当我单击该框，然后再次单击屏幕的另一部分（我的意思是超出文本框）时，数据将不会返回。我该怎么办？

  <html><head><title>(Type a title for your page here)</title>

  <script type="text/javascript">
  function make_blank()
  {
  document.form1.type.value ="";
  }
  </script>

  </head>
  <body >

  <form name=form1 method=post action='test.php'>
  <input type=text name=type value='Enter your user id' onclick="make_blank();">Enter User ID
     <b>Type</b>
  <input type=submit value=Submit> </form>

  </body>
  </html>
4

2 回答 2

2

您的问题的解决方案是以下之一，具体取决于您使用的是 HTML5 还是 XHTML（或 HTML4）。由于您没有说明您使用的是哪一个，因此我将两者都添加。

顺便说一句，你真的想使用焦点事件，而不是点击事件。这是因为用户还可以使用他/她的键盘或其他访问键导航到表单字段。

正如 Quentin 正确指出的那样，规范清楚地说明了占位符文本应该用于什么。因此，我已将您使用的文本更新为更合适的内容。

HTML5

<input type="text" name="type" placeholder="email@example.com">

XHTML

HTML：

<input type="text" name="type" value="email@example.com"
    onfocus="make_blank(this);"  onblur="restore_placeholder(this);" />

Javascript：

function make_blank (oInput)
{
    if (!('placeholder' in oInput))
        oInput.placeholder = oInput.value;
    if (oInput.value != oInput.placeholder)
        oInput.value = '';
}

function restore_placeholder (oInput)
{
    if (oInput.value == '' && 'placeholder' in oInput)
        oInput.value = oInput.placeHolder;
}
于 2012-09-04T12:45:57.047 回答
0

HTML5 和 JavaScript（用于 HTML4）的以下组合对我来说很好用：

HTML：

<input type="text" name="type" placeholder="email@example.com" 
       onfocus="make_blank(this);"
       onblur="restore_placeholder(this);" />

Javascript：

function make_blank(oInput) {
    if (oInput.value == 'placeholder') {
        oInput.value = '';
    }
}

function restore_placeholder(oInput) {
    if (oInput.value == '') {
        oInput.value = 'placeholder';
    }
}
于 2014-03-01T10:44:57.380 回答