php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)
方法一:html5配合css3实现带提示文字的输入框(摆脱js);
webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅。
当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。
HTML5出现后,我们有一个更好的方法。
看到有placeholder标签,可以作为用户文字提示。这样子就非常方便了。但是为了最求完美,我们需要在选中后,将文字变浅,或者修改提示文件的样式,我们该怎么办?
input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}
-webkit-input-placeholder,webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合。当然你要为了兼容IE6,这个方法是行不通。不过Ie9也支持placeholder标签,就是无法修改它的颜色而已。
那么,如果不支持该怎么办?可以简单直接使用Jquery帮忙,那么在就不在本文讨论范围了。
给一个Demo,Demo地址 必须在Webkit浏览器下才看到完整效果。是不是很方便?
方法二:就是 js 控制;
代码如下:
$(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();
}
})
})
})
效果如图;
点击的时候,提示文字消失;失去焦点的时候提示文字出现,但是有内容输入后失去焦点也不显示提示文字;还有,密码框和文本框不一样啊,密码框的值不显现的。
方法三:直接写标签上;(这个比较实用)
代码如下:
php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)相关推荐
- Android文字实现跑马灯效果——两种方法实现
第一种方法,设置textView的属性 <com.example.glide.MarqueeViewandroid:id="@+id/marqueeView"android: ...
- php输入框里的提示文字,input标签输入框带提示文字方法
本文主要介绍了input 标签实现输入框带提示文字效果(两种方法),需要的朋友可以参考下,希望能帮助到大家. 方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个 ...
- html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...
- html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一 将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
- input 单击 图标_JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一 将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
- 一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法
一.关于实现浏览器弹窗提示内容几秒后自动消失重定向执行其他函数的两种方法 第一种方法–向body动态写入div标签调用css效果显示: (新建***.jsp放在WebContent根目录下直接访问ip ...
- 文字转语音文件的两种方法
文件转语音文件的两种方法.小伙伴们在日常的工作.学习或是生活当中,是否遇到过以下这种情况.在工作中每天要阅读大量文件资料,在学习中每天要阅读各种课文,在生活中也会观看各种小说.但是长时间的用眼阅读,就 ...
- mysql调用tag标签_DEDECMS5.5/5.6/5.7列表页调用TAG标签(热门标签)的两种方法
DEDECMS5.5/5.6/5.7列表页调用TAG标签的两种方法: 一.DedeCMSv5.6及其以前版本: dedecms默认在列表是无法调用tag标签的,经过各位版主们的帮助,现给大家提供出2种 ...
- 怎么将图片内容转换成文字?这两种方法可以轻松实现
如何将图片的内容转换成文字呢?大家在使用图片文件的时候,遇到那种图片中包含一些有用的文字信息时,没有办法直接复制下来使用,只能对照着图片将文字信息给记录下来,这样会很耗费我们的时间.其实是有方法能够直 ...
最新文章
- leetcode--反转链表--python
- 201771010126.王燕《面向对象程序设计(Java)》第六周学习总结
- at android.widget.AbsListView$RecycleBin.addScrapView(AbsListView.java:)
- 支持向量机libsvm实战入门
- 深度学习(14)TensorFlow高阶操作三: 张量排序
- PHP新闻管理系统(包括前台后台)
- 漫画 | Linux 内核,简直太形象了!
- jqwidgets简单技术
- java里arcsin_java编程用泰勒级数计算arcsin
- pandas读取Excel判断指定列是否有空值
- 红米note7主板电路图_红米Note7Pro手机主板故障案例解析
- hbuilder边框代码是什么_HBuilderX自定义UI主题界面风格
- 自动驾驶/智能网联在物流小车末端配送示范应用现状
- MQL4自编指标学习6-MQL4中MACD指标的实现
- Intellij IDEA 学生的免费使用计划(使用edu邮箱注册)
- vs2013 与mysql的连接数据库_VS2013连接Mysql数据库的设置以及常见问题
- c++ 快速构建一个类计算正方形面积
- MBUS主机端简化版电路设计
- 北京怎么可以买到既时尚又便宜衣服
- 第十八届全国大学智能汽车竞赛报名信息统计:华北赛区报名队伍