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

问题描述 投票：2回答：3

我有一个文本框，里面已经有一段文本，所以用户知道应该在其中输入什么。我已经设置好了，因此单击它可以选择所有文本。我想知道是否可以做到这一点，所以单击文本框将清除所有文本。同样，如果用户删除了他们编写的所有内容，那么如何显示原始文本？

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

html text textbox
3个回答
3
投票

使用下面的代码，您只需将“清除”类添加到任何输入元素或文本区域中，它将清除初始值！！

<!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>
2
投票

又快又脏，但能完成工作：

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

更新：

由于我在2011年的回答input placeholder成为常事，所以正确的解决方案是：

<input type="text" placeholder="init..." />
0
投票

您创建的textarea应该在标记中具有与其关联的ID。文本区域ID如下所示：

<textarea id="someId"...>

其中“ someId”将是您为其赋予的任何名称。然后，当您使用以下代码时]

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

它将用上面的函数指定的文本替换框中的文本。在这种情况下，它将替换为无文本。只要确保它只执行一次即可，否则，当您在框外单击，然后再次在框内单击时，用户的输入也将被删除。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.