0

基本上问题的两个部分。

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

上述任何程序中是否涉及 javascript？如果是，请说明

  1. 非 javascript 解决方法和/或
  2. javascript代码做需要做的事情
4

6 回答 6

5

第一个技巧只是一个预设值。当您单击该字段时，它具有检查的 onclick 功能。值是“在此处写您的电子邮件”。如果是这样，请清除该字段。如果不是什么都不做。

然后它有一个 onblur 函数来检查该字段是否为空。如果是这样，请在其中打印“在此处写您的电子邮件”。

第二个也是JavaScript。

这是具有这两个功能的示例页面

<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-23T14:41:37.563 回答
1

这将需要 javascript（通过 jQuery 框架）。以下是快速输入的，未经测试。可能需要一些小的修补。如果你有问题 - 问:)

  1. 自动对焦所需元素
  2. 失焦时更改元素文本颜色
  3. 当用户提供的文本不存在时显示默认文本
/* 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-23T14:47:46.227 回答
1

第一个，快速而肮脏：

<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-23T14:49:20.077 回答
1

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

JavaScript 代码

  1. 只需将输入字段的值设置为您的预设值：

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

  2. 只需有一个 onload 函数，它将重点放在所需的输入字段上：

    window.onload = function() 
{
document.getElementById("email_field").focus();
}
于 2009-06-23T14:50:09.153 回答
0

您可能会考虑一些非标准属性：（placeholder我猜是在 safari 中工作）和autofocus（HTML5 规范的一部分）。

于 2009-06-23T14:47:54.167 回答
0 
myField.focus();

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

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

你的 CSS 看起来像：

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

当用户单击该字段时，让 javascript 向该字段添加一个类以更改文本颜色，如下所示（再次，jQuery）：

 $(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});
于 2009-06-23T14:47:57.690 回答