如何在文本框中放置说明文本并将焦点放在字段上？

如何将文本框内的文本框内的说明文本（如在表单中文本框的文本区域中写入电子邮件）与样式（即灰色显示，以便提示）类似于facebook主页。
如何尽快把光标焦点在一个特定的表单域在页面加载（如谷歌签入或Facebook登录）

是否有JavaScript的参与上述任何程序？如果是，请注明

非JavaScript的解决办法和/或
的JavaScript代码在做什么是需要

2009-06-23 OrangeRind

我不知道发生了什么在这里，但不downvote除非）你是绝对肯定的回答居然是错误。人们需要阅读http://blog.stackoverflow.com/2009/03/the-value-of-downvoting-or-how-hacker-news-gets-it-wrong/ – cgp 2009-06-23 15:08:13

雅是一个jQuery人必须删除他的帖子也许还能获得徽章。 downvoting它并不是必需的。无知是下降的最佳形式。无论你喜欢什么都可以投票，剩下的就放弃。 – OrangeRind 2009-06-23 15:19:50

第一招就是预设值。当你点击该字段时，它有一个检查的onclick函数。值“在这里写下你的电子邮件”。如果是这样，请清除该字段。如果不是无所事事。

然后它有一个onblur函数检查，是字段空的。如果是这样，请打印“在这里写下你的电子邮件”。

第二个也是JavaScript。

Here is与这两个功能

<html> 
<script type="text/javascript"> 
    function searchBox() 
    { 
     elem = document.getElementById("search"); 

     if(elem.value == "Search...") 
     { 
      elem.value = ""; 
     } 
    } 

    function searchBoxBlur() 
    { 
     elem = document.getElementById("search"); 

     if(elem.value == "") 
     { 
      elem.value = "Search..."; 
     } 
    } 

    function init() 
    { 
     document.getElementById("other_box").focus(); 
     } 
     window.onload = init; 
    </script> 
<body> 
    <input type="text" name="other_box" id="other_box" /> 
    <input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" /> 
</body> 
</html>

来源

2009-06-23 14:41:37

这意味着JavaScript？ – OrangeRind 2009-06-23 14:42:19

是的。 – 2009-06-23 14:42:42

这将需要的JavaScript（经由jQuery框架）为例页。以下内容很快打出并且未经测试。可能需要一些小修补。如果您有问题 - 问:)

自动对焦所需的元素
更改元素文本颜色，当聚焦
显示默认的文本，当用户提供的文本是不存在的

/* Run our work once the document is ready (loaded */ 
$(document).ready(function(){ 

    /* Set initial state of field */ 
    $("input.first-name").val("First Name").css("color", "#CCCCCC"); 

    /* Attach logic to the .focus() event of our input field */ 
    $("input.first-name").focus(function(){ 

    /* What to do when this field is focused */ 
    $(this).val("").css("color", "#333333"); 

    }).blur(function(){ 

    /* What to do when the field is blurred */ 
    if ($(this).val() == "") { 

     /* Set value to 'First Name,' and set color to light gray */ 
     $(this).val("First Name").css("color", "#CCCCCC"); 

    } 

    }); 

    /* Autofocus our field */ 
    $("input.first-name").focus(); 

});

来源

2009-06-23 14:47:46 Sampson

有非标准的属性，你可以考虑：placeholder（在Safari我猜作品）和autofocus (a part of HTML5 spec)。

implement placeholder in Javascript
你可以做类似与autofocus（只火InputElement.focus()）

来源

2009-06-23 14:47:54

myField.focus();

这应该将光标置于MyField的页面加载时（如果你将其放置在年底或在$(document).ready() jQuery块中）。我在不同的浏览器中看到了一些不一致的行为，所以你的里程可能会有所不同。

至于设置文本字段输入的颜色，我会当用户点击到它设置有一个默认值，并添加一个单独的CSS类：

和你的CSS将看起来像：

.grayedInputField { 
    color: gray; 
} 
.activeInputField { 
    color: black; 
}

而当用户点击进入该领域，已经javascript中的类添加到外地去更改文本颜色，像这样（再次重复：jQuery）：

$(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});

来源

2009-06-23 14:47:57 inkedmn

第一，快速和肮脏的：

<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>

使该onfocus事件在外部JavaScript文件的功能被建议。这将产生：

外部脚本：

function checkText(el,someText){ if(el.value == someText) el.value = ''}

您的输入：

<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>

第二：给您想要输入 “重点” 的ID，做这样的事情：

<input id="foo" name="foo" value="Default text OMG!"/>

而且在脚本：

window.onload = function(){ document.getElementById('foo').focus() }

来源

2009-06-23 14:49:20 ajm

有没有非JavaScript的方式来做你的问题的第一部分。就第二部分而言，可以通过JavaScript轻松完成，但即使没有它，大多数现代浏览器也会将焦点添加到第一个输入字段。

JavaScript代码

只需将值输入字段设置为你的预设值：

function focus_function() 
{ 
if (this.value=="Enter email here") { 
this.value=""; 
this.class="actualEmail"; 
} 
} 

function blur_function() 
{ 
if (this.value=="") { 
this.value="Enter email here"; 
this.class="preset"; 
} 
}

您可以有两个CSS类：preset和actualEmail，并指定不同颜色等

只要有这把重点放在所需的输入域有载功能：

window.onload = function() 
{ 
document.getElementById("email_field").focus(); 
}

来源

2009-06-23 14:50:09 Shreyas

如何在文本框中放置说明文本并将焦点放在字段上？

回答

相关问题