JavaScript-js 实现输入框提示信息,模拟html5的placeholder属性

JavaScript-js 实现输入框提示信息,模拟html5的placeholder属性

偏爱自由 发布于 2016-12-05 字数 443 浏览 1421 回复 4

一个登陆页面添加input提示信息,如下图

请输入图片描述

地址为:www.115.com

就是当用户在不输入任何信息的时候,输入框显示提示信息,这种效果用原始js如何实现的?给个你们用过的例子!
大家看看上面那个例子,当光标选中输入框时,再不输入数据的时候也显示提示信息

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

归属感 2017-08-19 4 楼

var Util = {};

//文本框有内容的时候隐藏对应的label
Util.bindLabelHide = function(domIds) {
var doms = [],
labs = [],
tmp = $("#" + domIds.join(",#")),
c, i;
tmp.each(function() {
var lab = $("[for=" + this.id + "]");
if (lab.length > 0) {
doms.push($(this));
labs.push(lab);
}
});
c = doms.length;
setInterval(function() {
for (i = 0; i < c; i++) {
labs[i]doms[i].val() == "" ? "show" : "hide";
}
}, 50);
};

Util.bindLabelHide(["user_name","name","mobile","address","introduce"]);

源代码你懂得。

偏爱自由 2017-06-29 3 楼

 <input type="text" value="请输入你的名字/Email" id="email" />

默认是这样的,可以设置当input获得焦点或者input内容改变的时候再修改input内的样式,用onfocus、onchange这些事件

比如获得焦点的时候清空内容:

 <input type="text" value="请输入你的名字/Email" id="email" onfocus="this.value='';" />

这是最简单的,其他的都可以举一反三

清晨说ぺ晚安 2017-02-12 2 楼

给个兼容不同浏览器模拟html5的placeholder属性,原理就是检查是否存在placeholder属性,不存在则模拟该属性,希望对有同样需求的人有用:

<!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=utf-8" />
<title></title>
</head>
<body>
<p><input name="username" type="text" id="username" maxlength="50" placeholder="请输入用户名"/></p>
<p><input name="password" type="password" id="password" placeholder="请输入密码"/></p>
<p><input name="repassword" type="password" id="repassword" placeholder="请再输入密码"/></p>
<script>
var funPlaceholder = function(element) {
//检测是否需要模拟placeholder
var placeholder = '';
if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
//当前文本控件是否有id, 没有则创建
var idLabel = element.id ;
if (!idLabel) {
idLabel = "placeholder_" + new Date().getTime();
element.id = idLabel;
}

//创建label元素
var eleLabel = document.createElement("label");
eleLabel.htmlFor = idLabel;
eleLabel.style.position = "absolute";
//根据文本框实际尺寸修改这里的margin值
eleLabel.style.margin = "2px 0 0 3px";
eleLabel.style.color = "graytext";
eleLabel.style.cursor = "text";
//插入创建的label元素节点
element.parentNode.insertBefore(eleLabel, element);
//事件
element.onfocus = function() {
eleLabel.innerHTML = "";
};
element.onblur = function() {
if (this.value === "") {
eleLabel.innerHTML = placeholder;
}
//checkValue(this);
};

//样式初始化
if (element.value === "") {
eleLabel.innerHTML = placeholder;
}
}
};
funPlaceholder(document.getElementById("username"));
funPlaceholder(document.getElementById("password"));
funPlaceholder(document.getElementById("repassword"));
</script>
</body>
</html>

甜柠檬 2017-02-02 1 楼

我大概说下原理吧,现在很多网站都是用这样的提示方式了,如知乎,新浪微博等等。。

其实方式有好多种:

1,先说下最原始的方式:

将提示信息覆盖到 文本框上(设置position,z-index),呈现提示信息的元素加点击事件,并且将指定的文本框获得焦点,同样文本框有keyup 或 keydown 事件,在事件中判断内容是否为空,有内容直接隐藏 提示信息,反之显示。
通常实现提示信息是由 label 标签来做,因为加for属性就可以了,无需增加click事件。。

2,使用html5 新增的 PLACEHOLDER 属性

这个就比较简单了,无需js。如:

<input type="text" placeholder="这里输入用户名">