Question

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

  <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>

Answer 1

您的问题的解决方案是以下之一，具体取决于您使用的是HTML5还是XHTML（或HTML4）。既然你没有说明你正在使用哪一个，我会加两个。

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

由于Quentin正确states，the specification明确了占位符文本应该用于什么。因此，我已将您正在使用的文本更新为更合适的内容。

<强> 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;
}

Answer 2

以下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';
    }
}

单击文本时删除文本框的默认数据

2 个答案: