Question

请检查以下链接：

http://jsfiddle.net/cT9kg/4/

正如您可以看到带有按钮的搜索字段。

如果您无法理解我的意思，请查看标题＆＃34;在提问题页面输入。

输入具有自动对焦功能。

BUT

我怎样才能拥有它，因此文本已经在自动对焦的输入中，但只要有人输入输入，文本就会消失。

和

如果某人在输入中输入了文本但随后将其删除，则会返回到开头的方式：在焦点上显示文本，指示此人在输入中输入内容。

谢谢！

詹姆斯

Answer 1

您可以定义默认值。

焦点 - 空值，如果值是默认值。

当元素失去焦点时，你可以检查它是否为空，如果是，则恢复默认值。

Answer 2

我已经对此进行了测试，只需确保将<script>部分放在</body>标记之前。

<input type="text" class="input1" autofocus="focus" id="search" value="Type here..." onKeyPress="checkValue()" />

----

<script type="text/javascript">
    var searchEl = document.getElementById('search');
    var defaultValue = searchEl.value;

    function checkValue() {
        if (searchEl.value == defaultValue) {
            searchEl.value = "";
        }          
    }   
</script>

Answer 3

您可以使用HTML placeholder属性，但在大多数浏览器中无法实现您的目标：只要输入被聚焦，占位符文本就会消失。

对于类似于iOS的功能（也可以在Twitter等网站上找到），您需要使用JavaScript。一个例子可以是seen online here。

This similar question（and this one）有一些有用的替代方案和代码示例。

您正确使用autofocus，这很好，但浏览器支持不完整。您可以添加JS回退，如下所示（taken from here）：

<script>
window.onload = function () {
    if (!("autofocus" in document.createElement("input"))) {
        document.getElementById("s").focus();
    }
}
</script>

Answer 4

哇。我尝试在Ask a question页面的源代码中进行挖掘。谈论复杂的。

这是CSS File。虽然看起来相关的比特是这样的，但它们似乎并不比格式更多（除了edit-field-overlay技巧。

.form-item {padding:10px 0px 15px 0px;}
.ask-title            {margin-bottom:-15px;margin-top:-10px;}
.ask-title-table      {width:668px;}
.ask-title-field      {width:610px;}
.ask-title-cell-value {padding-left:5px;}
.edit-field-overlay   {display:none;}

HTML（删除了一些TD标签）：

    <div class="form-item ask-title">
        <table class="ask-title-table">
            <tr>
                <td class="ask-title-cell-value">
                    <input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field" value="">                        
                    <span class="edit-field-overlay">what&#39;s your programming question? be specific.</span>
                </td>
            </tr>
        </table>
    </div>

但我完全无法找出相关的Javascript bits.因为我看不到这个表单的onEvent处理程序，所以对title}的唯一引用将在{{{ 1}}功能。

有人试图向相对新手解释吗？

在焦点上如何使输入中有文本？

4 个答案: