Fatal编程技术网
  • php/
  • Php 如何将解释性文本放在表单的文本框中，并将光标集中在字段上？

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

php javascript forms

Php 如何将解释性文本放在表单的文本框中，并将光标集中在字段上？,php,javascript,forms,cursor-position,Php,Javascript,Forms,Cursor Position,基本上是问题的两部分 如何将解释性文本放入表单中的文本框中（如在表单中文本框的文本区域中编写电子邮件），并使用facebook主页上的样式（即变灰表示建议） 如何在页面加载时将光标焦点放在特定的表单字段上（如google登录或facebook登录） 上述过程中是否涉及javascript？如果是，请具体说明 非javascript解决方案和/或 执行所需操作的javascript代码 第一个技巧只是一个预设值。当你点击这个字段时，它有一个onclick函数来检查。值为“在此处写入您的电子邮件”。

基本上是问题的两部分

  • 如何将解释性文本放入表单中的文本框中（如在表单中文本框的文本区域中编写电子邮件），并使用facebook主页上的样式（即变灰表示建议）
  • 如何在页面加载时将光标焦点放在特定的表单字段上（如google登录或facebook登录）
    • 上述过程中是否涉及javascript？如果是，请具体说明

  • 非javascript解决方案和/或
  • 执行所需操作的javascript代码
    • 第一个技巧只是一个预设值。当你点击这个字段时，它有一个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>

    
函数searchBox（）
{
elem=document.getElementById（“搜索”）；
如果（elem.value==“搜索…”）
{
elem.value=“”；
}
}
函数searchBoxBlur（）
{
elem=document.getElementById（“搜索”）；
如果（元素值==“”）
{
elem.value=“搜索…”；
}
}
函数init（）
{
document.getElementById（“其他_框”）.focus（）；
}
window.onload=init；
    这需要javascript（通过jQuery框架）。下面的内容很快就打印出来了，而且没有经过测试。可能需要一些小的修补。如果你有问题，问：）

  • 自动聚焦所需元件
  • 不对焦时更改元素文本颜色
  • 当用户提供的文本不存在时显示默认文本
    • 您可能会考虑一些非标准属性：
    placeholder
    （我想它适用于safari）和

    • 您可以使用
      自动对焦
      （只需启动
      InputElement.focus（）
      ）
    当页面加载时，应该将光标放在myField中（如果将光标放在末尾或
    $（document）.ready（）
    jQuery块中）。我在不同的浏览器中看到了一些与此不一致的行为，因此您的里程数可能会有所不同

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

    你的CSS看起来像：

    .grayedInputField {
    color: gray;
}
.activeInputField {
    color: black;
}
    当用户点击该字段时，让javascript向该字段添加一个类来更改文本颜色，如下图所示（同样，jQuery）：

    第一个，又快又脏：

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

    <input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>
    没有非JavaScript的方法来完成问题的第一部分。就第二部分而言，使用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类：
    预设
    和
    实际邮件
    ，并指定不同的颜色等

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

    window.onload = function() 
{
document.getElementById("email_field").focus();
}
    • 这是jQuery吗？还是javascript？它是javascript，通过jQuery框架。jQuery基本上使javascript更易于使用。它可以让你做得更多更快。它让你不必找出IE、FF和其他浏览器处理javascript的方式之间的差异。我不确定这里发生了什么，但不要投反对票，除非a）你绝对肯定答案是错的。人们需要了解你一个jQuery的家伙不得不删除他的帖子，也许还能挣到一枚徽章。不需要投否决票。无知是否决权的最佳形式。你想投多少票就投多少票，剩下的就留下吧但奥拉弗尔的answewr更全面，更接近我想要的。还是非常感谢！谢谢也许他们应该取消评论的最小15个字符限制！我想知道为什么他们一开始就有它？否则，这句话可能只是“非常感谢”，这对你、我和其他人（包括我的键盘）都会有好处；-）最后一个字符后面有很多空格。就像我在上面的“是”评论中所做的那样。你看不到它，但它就在那里。太好了。 
    function checkText(el,someText){ if(el.value == someText) el.value = ''}

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

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

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

    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";
}
}

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