Question

基本上是问题的两个部分。

如何将解释性文本放在文本框中的文本框中（如在表单中的文本框的文本区域中编写电子邮件），样式（即灰色，以便建议），就像在facebook主页上一样。
如果在页面加载后将光标焦点放在特定的表单字段上（例如google登录或facebook登录）

上述任何程序都涉及到javascript吗？如果是，请说明

非JavaScript解决方法和/或
javascript代码执行所需的操作

Answer 1

第一个技巧只是预设值。当您单击该字段时，它具有一个检查的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>

Answer 2

这将需要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();

});

Answer 3

第一个，快速而又肮脏：

<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() }

Answer 4

没有非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，并指定不同的颜色等。

只需要一个onload函数，将焦点放在所需的输入字段上：

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

Answer 5

您可以考虑使用非标准属性：placeholder（我认为在Safari中有效）和autofocus (a part of HTML5 spec)。

implement placeholder in Javascript
您可以使用autofocus（只需点击InputElement.focus()）

Answer 6

myField.focus();

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

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

你的CSS看起来像：

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

当用户点击该字段时，让javascript在字段中添加一个类来更改文本颜色，就像这样（再次，jQuery）：

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

如何将解释性文本放在表单中的文本框中并将光标聚焦在字段上？

6 个答案: