我想在输入元素内插入描述性文本,当用户单击它时该描述性文本会消失。
我知道这是一个很常见的技巧,但我不知道该怎么做..
最简单/更好的解决方案是什么?
如果您使用的是 HTML5,则可以使用
placeholder
属性。
<input type="text" name="user" placeholder="Username">
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
一个更好的例子是 SO 搜索按钮!这就是我从哪里得到这段代码的。查看页面源代码是一个很有价值的工具。
在我看来,最好的解决方案既不涉及图像也不使用输入的默认值。相反,它看起来有点像 David Dorward 的解决方案。
它很容易实现,并且对于屏幕阅读器和没有 JavaScript 的用户来说可以很好地降级。
看一下这里的两个例子: http://attardi.org/labels/
我通常在表单上使用第二种方法(labels2)。
常见的做法是使用默认值作为标签,然后在字段获得焦点时将其删除。
我真的不喜欢这种方法,因为它具有可访问性和可用性影响。
相反,我会从在字段旁边使用标准元素开始。
然后,如果 JavaScript 处于活动状态,请在祖先元素上设置一个类,这会导致应用一些新样式:
然后,每当输入失去焦点时,我都会测试输入是否有值。如果是,请确保祖先元素有一个类(例如“hide-label”),否则请确保它没有该类。
每当输入获得焦点时,设置该类。
样式表将在选择器中使用该类名来隐藏标签(使用文本缩进:-9999px;通常)。
这种方法为所有用户提供了良好的体验,包括禁用 JS 的用户和使用屏幕阅读器的用户。
我整理了提出的解决方案 @Cory Walker 以及 @Rafael 的扩展 单一形式@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
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
还添加 onblur 事件。
当您开始输入时,它会消失。如果为空,它将再次出现。
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>
最简单的方法...
请使用 PlaceHolder.JS,它适用于所有浏览器,并且对于不兼容 html5 的浏览器非常简单 http://jamesallardice.github.io/Placeholders.js/
关于HTML属性placeholder和标签textarea的一点提示,请确保
<textarea>
和</textarea>
之间没有任何空格,否则placeholder不起作用,例如:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
这行不通,因为之间有空格...
用这个
风格:
<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()函数。
干得好
您不需要 Javascript 代码...
我认为你的意思是占位符属性。这是代码:
<input type="text" placeholder="Your descriptive text goes here...">
默认文本将是灰色的,单击后它将消失!
我认为保留标签而不是使用上面提到的占位符是件好事。它对用户体验有好处,如下所述: https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
这里是输入字段中带有标签的示例: codepen.io/jdax/pen/mEBJNa
迟到了,但这对我有用:我越来越频繁地看到字段内部的标签本身来清理页面,而不是在字段外部/上方,或者不使用占位符作为字段标签填写该字段后就会消失。
.innerLabel < or other selector > {
margin-top: 18px;
position: absolute;
margin-left: 4px;
color: darkslategray;
}
input[type=text] < or other selector > {
background-color: #eeeeee;
border: solid 1px lightgray;
border-style: solid;
padding: 11px 2px 0px 4px;
font-size: 17px;
color: darkslategray;
line-height: 31px;
}
<label for='firstname' class='required innerLabel'>First Name</label><br>
<input type='text' name="firstname" size='50' required/> <br><br>
<label for='lastname' class='required innerLabel'>Last Name</label><br>
<input type='text' name="lastname" size='50' required/> <br><br>
这是一个简单的示例,它所做的只是覆盖图像(使用您想要的任何措辞)。我在某处看到过这种技术。我正在使用原型库,因此如果使用其他库,您需要进行修改。在 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>