php输入框里的提示文字,input标签输入框带提示文字方法
本文主要介绍了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标签输入框带提示文字方法相关推荐
- html accept属性,input标签accept属性的使用方法及作用
html代码input标签accept属性的使用方法及作用介绍如下: 标签accept属性的定义 accept属性规定了可通过文件上传提交的服务器接受的文件类型. accept属性应该配合type属性 ...
- php输入框里的提示文字,input 标签实现输入框带提示文字效果(两种方法)
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...
- 前端实现input标签输入框密码框显示文字效果
背景:各种登录网址账号密码输入框中的显示文字效果,当点击输入框时,显示的文字消失,当离开输入框后再次显示默认的文字 思路:采用 input 标签,给它设置 CSS 样式,这里本人将两个 input 标 ...
- 关于编辑器对input标签报错提示“表单输入没有相关label”的问题
相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...
- 多个class相同的input标签 获取当前值!方法!
2019独角兽企业重金招聘Python工程师标准>>> var a= $(this).prev( ".你的class" ).val(); 转载于:https:// ...
- html input file 修改按钮文字_html单选按钮默认选中怎么做?input标签的单选按钮用法实例...
本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法,还有关于HTML input标签的单选默认按钮的做法.接下来我们一起来看看这篇文章吧 首先我们介绍的是在html input ...
- html语言 input,input标签(HTML中input用法详解)
input标签 Firstname: Lastname: HTML中input用法详解 1.type 格式:type="文本的类型" 当type设置为text时,text属性表示一 ...
- html怎么把view变成标签_html单选按钮默认选中怎么做?input标签的单选按钮用法实例...
本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法,还有关于HTML input标签的单选默认按钮的做法.接下来我们一起来看看这篇文章吧 首先我们介绍的是在html input ...
- html单选按钮默认选中怎么做?input标签的单选按钮用法实例
本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法,还有关于HTML input标签的单选默认按钮的做法.接下来我们一起来看看这篇文章吧 打造全网web前端全栈资料库(总目录) ...
最新文章
- linux 环境下配置python虚拟环境
- Linux 服务器高级编程ET LT代码
- arcengine遍历属性表_小程序导出数据到excel表
- 计算机常见故障报警,常见听报警志与故障
- 使用pip将Python软件包从本地文件系统文件夹安装到virtualenv
- RFC 5961翻译
- 如何理解几何分布与指数分布的无记忆性?
- Vmware安装Ubuntu Kylin麒麟系统图文
- (翻译)斑马纹模式(Alternating Row Colors)
- PageRank算法改进
- 对麦克斯韦方程组的理解(非常详细)
- 抖音下载的视频电脑可以去水印吗,怎么去掉视频水印
- android 老人模式吗,父母适合用安卓还是iPhone?看完这些适老化功能再做决定
- 小学六年级上册计算机教学总结,小学信息技术五年级上册教学工作总结
- HTML5中,《br》《br/》《br /》三者的区别?
- 个人的web开发心得(SQL)----非常适合入门新手,都是常识
- mongodb Index(2)
- html五星红旗写法,HTML5/CSS3画国旗-五星红旗
- 计算机财务管理知识点总结,会计基础知识点归纳
- MySQL免安装版安装探索