Question

我想在输入元素中插入一个描述性文本，当用户点击它时它就会消失。

我知道这是一个非常常见的技巧，但我不知道该怎么做..

最简单/最好的解决方案是什么？

Answer 1

如果您使用的是HTML5，则可以使用placeholder属性。

<input type="text" name="user" placeholder="Username">

Answer 2

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

一个更好的例子是SO搜索按钮！这就是我从中获取此代码的地方。查看页面源是一个很有价值的工具。

Answer 3

在我看来，最佳解决方案既不涉及图像也不涉及输入的默认值。相反，它看起来像David Dorward的解决方案。

对于没有javascript的屏幕阅读器和用户来说，它很容易实现和降级。

看看这里的两个例子： http://attardi.org/labels/

我通常在表单上使用第二种方法（labels2）。

Answer 4

常见的方法是使用默认值作为标签，然后在字段获得焦点时将其删除。

我真的不喜欢这种方法，因为它具有可访问性和可用性含义。

相反，我首先要在字段旁边使用标准元素。

然后，如果JavaScript处于活动状态，请在祖先元素上设置一个类，这会导致一些新样式应用：

相对定位包含输入和标签的div
绝对定位标签
将输入绝对放在标签
删除输入的边框并将其背景颜色设置为透明

然后，每当输入失去焦点时，我都会测试输入是否有值。如果是，请确保祖先元素具有类（例如“hide-label”），否则确保它没有该类。

每当输入获得焦点时，设置该类。

样式表将在选择器中使用该类名来隐藏标签（使用text-indent：-9999px;通常）。

这种方法为所有用户提供了不错的体验，包括那些禁用JS和使用屏幕阅读器的用户。

Answer 5

我已经提出了由...提出的解决方案来自@Rafael的@Cory Walker扩展而@Tex女巫的形式对我来说有点复杂并想出了一个有希望的解决方案

使用javascript和CSS禁用错误。

它使用表单字段的背景颜色进行操作以显示/隐藏标签。

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

查看正在运行的脚本：http://mattr.co.uk/work/form_label.html

Answer 6

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

也添加一个onblur事件。

Answer 7

当您开始输入时，它将消失。如果为空，它将再次出现。

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

最简单的方式......

Answer 8

请使用PlaceHolder.JS，它适用于所有浏览器，非常容易用于非html5兼容的浏览器 http://jamesallardice.github.io/Placeholders.js/

Answer 9

关于HTML属性占位符和标记 textarea 的一个提示，请确保<textarea>和</textarea>之间没有任何空格，否则占位符不起作用，例如：

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

这不起作用，因为......之间有空格。

Answer 10

使用此

式：

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

HTML：

的javascript：

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

请记住在提交表单之前调用defaultLabelClean（）函数。

干得好的工作

Answer 11

您不需要Javascript代码...
我认为你的意思是占位符属性。这是代码：

<input type="text" placeholder="Your descriptive text goes here...">

默认文本将是灰色的，当点击时，它将消失！

Answer 12

我认为保留标签而不使用如上所述的占位符是很好的。它对UX的好处如下： https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

以下示例在“输入”字段中包含“标签”： codepen.io/jdax/pen/mEBJNa

Answer 13

这是一个简单的例子，它只是覆盖一个图像（用你想要的任何措辞）。我在某个地方看到了这种技术。我正在使用原型库，所以如果使用其他东西你需要修改。在window.load之后加载图像时，如果禁用了javascript，它会正常失败。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>

如何在<input />元素中创建标签？

13 个答案: