Html5带来了 placeholder
<input id="t1" type="text" placeholder="请输入文字" />
轻松实现 简单不...但是扩展性比较差 而且ie等浏览器支持不是很完善 而且各主流浏览器支持效果不是很统一
所以还是jquery/js 比较实用...简单实现起来也不是很复杂 并且统一性比较强大
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#focus .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})
</script>
<style type="text/css">
form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
label{display:block;height:40px;position:relative;margin:20px 0;}
span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
.border_radius{border-radius:5px;color:#B00000;}
h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus">
<h2>聚焦型提示语消失</h2>
<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
<form class="border_radius" id="keydown">
<h2>输入型提示语消失</h2>
<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>
</body>
</html>
- 大小: 22.7 KB
分享到：
相关推荐
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：...
这篇文章我们来看看什么是input输入框背景文字提示效果，如下图所示： 这种效果现在网上非常的普遍流行，但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式，不需要任何的JavaScript，只...
html5为input添加了原生的占位符属性placeholder，高级浏览器都支持这个属性，例如： <input type="text" placeholder="搜索" value=" "> 默认的placeholder字体颜色是呈浅灰色，如果想改变这个默认颜色，解决...
有好多的提示文字直接写在了input框中，placeholder属性只在高版本的谷歌和火狐中有但是不兼容ie8以下，此附件为input框中出现提示文字（兼容ie 火狐 谷歌）。
如何用javascript获取input输入框中的值，js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML <input type="text" name"username" id="user" placeholder="用户名" class="uusr"> 一、...
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示
input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ...
本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法。分享给大家供大家参考，具体如下： 如果在输入框加上placeholder=”xx”属性，例如： <input type="text" placeholder="请输入关键词"/> ...
微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的...
Vue 模糊查询功能 原理：原生js的search() ...input输入框，模糊查询 <input type=text placeholder=请输入... v-model=searchVal> (item,index) key=index value=item.value v-text=item.name> <
借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现 :placeholder-shown伪类目前兼容性如下： :placeholder-shown兼容性 直接上代码！:smiling_face_selector: 源码 html: <...
在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以...
1. 去掉input 在iOS中的默认圆角和内阴影 iOS下 input会有自带的圆角...3. input 输入框调出数字键盘 单独使用type=number时，iOS调起的并不是九宫格样式的数字键盘，如果需要调起九宫格的数字键盘需要加上 pattern=[0-
方法一：html5配合css3实现带提示文字的输入框(摆脱js)； webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感...
在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。...首先，用户看到一个带有placeholder属性的input标签，显示了一些示例性质的问题。label元素默认是隐
原文地址：HTML5′s placeholder Attribute 演示地址: placeholder演示 原文日期： 2010年08月09日 翻译日期： 2013年8月6日 浏览器引入了许多的HTML5 特性: 有些是基于HTML的，有些是JavaScript APIs形式的,但都很...
带图标的输入框（属性方式） <el placeholder=请选择日期 suffix-icon=el-icon-date v-model=input2> <el placeholder=请输入内容 prefix-icon=el-icon-search v-model=input21> 带图标的输入框（slot...