具有占位符/提示和焦点的文本字段 - 可能吗？

Posted 2023-03-05

【中文标题】具有占位符/提示和焦点的文本字段 - 可能吗？

【英文标题】：Text field with both a placeholder/hint AND focus - possible?

【发布时间】：2011-12-15 09:29:22

【问题描述】：

我们进行了一项调查，其中某些页面只有一个 textarea 问题。由于它是唯一的输入，我们希望它专注于该框的 onload。但我们也希望在同一个文本区域中有一个占位符样式的文本。

有很多解决方案可以让这两个功能在所有浏览器上都运行，例如this one by Ajaxblender。但我希望提示在焦点后保留，然后在输入文本时消失。有什么想法吗？

注意 - 我意识到 html 规范声明占位符元素应该在焦点上消失。所以也许我应该说我想要一个“水印”。此用户界面适用于计算机知识水平较低的老年男性 - 他们需要我们能够提供的任何帮助。

必须使用 IE8 :(

【参考方案1】：

如果我理解了这个问题，您可以尝试类似

HTML

<textarea id="first">Instructions go here</textarea>

jQuery

$('#first').focus().one('keydown', function()
    $(this).val('');    
);

示例：http://jsfiddle.net/jasongennaro/AYRyH/

说明

空的.focus() 将焦点放在onload 字段上。 .one() 为元素触发一次事件 在keydown 上，我们删除当前值，这是我们在开头添加的指令。

编辑

鉴于您的评论

我需要它更像一个标准的占位符 但是，所以如果您输入某些内容，则将其删除，以便该字段为 空白，它会返回显示原始提示。

您可以这样做...捕获value，然后将其放回blur 上的textarea（如果那里没有任何内容）。

var a = $('#first').val();

$('#first').focus().one('keydown', function()
    $(this).val('');    
);

$('#first').blur(function()
    if($(this).val() == '')
       $(this).val(a); 
    
)

示例 2： http://jsfiddle.net/jasongennaro/AYRyH/1/

【讨论】：

谢谢，这正是我想要的方向。我需要它的功能更像一个标准占位符，所以如果你输入一些内容，然后删除它，使该字段为空白，它会返回显示原始提示。