您的位置：首页 > Web前端 > JQuery

CSS JQuery input+label实现placeholder效果

2017-07-26 16:11 393 查看

参考文献

input+label制作兼容IE8的输入提示，实现placeholder效果，下附代码

js 实时监听input中值变化

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 引入jquery，否则jquery函数无法调用 -->
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>

<style>
.input {
position: relative;
}
.input .input-text { /*文本框*/
width: 258px; /*宽度*/
height: 35px; /*高度*/
border: 1px #AAAAAA solid;
border-radius: 3px; /*圆角边框宽度*/
font-size: 17px; /*文字大小*/
padding-left: 10px; /* 设置元素左内边距（空白） */
}
.input label {
color: #C1C0C0;
position: absolute;
top: 12px;
left: 15px;
}
</style>

<script type="text/javascript">
$(function() {
$('#phoneNumber').bind('input propertychange', function() {
if($(this).val() == ""){
$('#phoneNumberLabel').show();
}
else{
$('#phoneNumberLabel').hide();
}
});
});
</script>

<title>Insert title here</title>
</head>
<body>
<div class="input">
<input id="phoneNumber" type="text" class="input-text" />
<label id="phoneNumberLabel" for="phoneNumber">手机号</label>
<a href="toRegister">注册</a>
</div>
</body>
</html>

onpropertychange：只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

效果（测试环境：IE11）

点击

输入内容

删除内容

这里有一个bug

当页面跳转之后后退时，因为没有触发jQuery 内容更改事件，所以label中的提示文字会出现。

解决方案：label处加上style="display:none;" 默认不显示，通过jQuery在页面加载时显示它。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航