如何在 <input> 元素内创建标签？
https://stackoverflow.com/questions/781473
-
13-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我想在输入元素中插入描述性文本，当用户单击它时该描述性文本会消失。
我知道这是一个很常见的技巧，但我不知道该怎么做。
最简单/更好的解决方案是什么？
解决方案
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
一个更好的例子是在SO搜索按钮！这就是我从得到这个代码。查看页面源是一种有价值的工具。
其他提示
如果您正在使用HTML5，你可以使用placeholder属性。
<input type="text" name="user" placeholder="Username">
在我看来，最好的解决方案涉及既不图像外，用输入的默认值。相反，它看起来像戴维·多沃德的解决方案。
这很容易实现，并很好地降低了屏幕阅读器和用户没有JavaScript的。
看看这里的两个例子： http://attardi.org/labels/
我通常在我的形式使用第二种方法（标签2）。
常见的方法是使用默认值作为标签，然后在字段获得焦点时将其删除。
我真的不喜欢这种方法，因为它具有可访问性和可用性影响。
相反，我会从在字段旁边使用标准元素开始。
然后，如果 JavaScript 处于活动状态，请在祖先元素上设置一个类，这会导致应用一些新样式：
- 相对定位包含输入和标签的 div
- 绝对定位标签
- 将输入绝对定位在标签顶部
- 删除输入的边框并将其背景颜色设置为透明
然后，每当输入失去焦点时，我都会测试输入是否有值。如果是，请确保祖先元素有一个类（例如“隐藏标签”），否则请确保它没有该类。
每当输入获得焦点时，就设置该类。
样式表将在选择器中使用该类名来隐藏标签（使用文本缩进：-9999像素；通常）。
这种方法为所有用户提供了良好的体验，包括禁用 JS 的用户和使用屏幕阅读器的用户。
我已经把解决方案 @Cory沃克从@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>
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
添加onblur事件太
当您开始键入它会disappear.If空它会再次出现。
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>
最简单的方法...
请使用PlaceHolder.JS其作品在所有浏览器，很容易对非HTML5兼容的浏览器 http://jamesallardice.github.io/Placeholders.js/
有关HTML属性的一个暗示的占位符的和标签的的textarea 的，请确保没有<textarea>和</textarea>之间的任何空间，否则的占位符不工作，例如：
<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...">
，点击 点击 默认的文本将会是灰色十岁上下和点击时，它会dissapear！
我觉得它很好的保持了标签和如上所述不使用占位符。其UX好，因为在这里说明一下： https://www.smashingmagazine.com/2018/03 / UX-接触形式必需品-转换/
下面例如相输入字段内标签： codepen.io/jdax/pen/mEBJNa
下面是一个简单的例子，它是所有叠加的图像（与任何你想要的措辞）。我什么地方看到过这种技术。我使用的原型库，所以你需要使用，如果别的东西来修改。与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>
