自动替换HTML文本框中的文本

时间:2011-02-04 22:27:28

标签: html text textbox

我有一个文本框,里面有一段文字,所以用户知道它应该包含什么内容。我已经设置好了,所以点击它会选择所有文字。我想知道如果我能如何点击文本框将清除所有文本。同样,如果用户删除了他们所写的所有内容,我该如何显示原始文本?

我想要做的一个完美的例子是在Stack Overflow上提问时的标题文本框。

3 个答案:

答案 0 :(得分:3)

使用下面的代码,您只需将“clear”类添加到任何输入元素或textarea,它将清除初始值!!!

<!DOCTYPE html>    
<html>
    <head>
    <title>Sample</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
    <script>
    $(function() {
      $('.clear').one('focus', function() {
        this.value = '';
      });
    });
    </script>
    </head>
    <body>
    <input type="text" value="Full Name" class="clear"/> <br />
    <input type="text" value="Email" class="clear"/> <br />
    <textarea value="About you..." class="clear"></textarea>
    </body>
    </html>

答案 1 :(得分:1)

快而又肮脏,但是做到了:

<input type="text" value="init..." onfocus="this.value=''; this.onfocus=null;" />

希望这有帮助!

答案 2 :(得分:0)

您创建的textarea应在标记中具有与之关联的ID。文本区域ID看起来像这样:

<textarea id="someId"...>

“someId”可以是你给它的任何名字。然后当您使用以下代码

document.getElementById('someId').value = '';

它将用上面函数指定的文本替换框中的文本。在这种情况下,它将替换它没有文本。只需确保它只执行一次,否则,当您单击框外,然后再次单击它内部时,用户的输入仍将被删除。