input 框背景提示文字

2019独角兽企业重金招聘Python工程师标准>>>

感谢@Kingchan 文章来自 http://www.cnblogs.com/tzdy/p/5969553.html

方法一：直接写标签上；

代码如下：

<input type="text" value="提示内容" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style ="color:#999;"/>

方法二：就是 js 控制；

代码如下：

<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>

方法三：

H5之后有更好的方法

<input type="text" placeholder="用户名或邮件地址" name="username"/>

转载于:https://my.oschina.net/zjllovecode/blog/2208822

input 框背景提示文字相关推荐

HTML5的input框placeholder提示文字默认为灰色，修改
<input type="text" value="请输入您需要查找的内容 -" onfocus="this.style.color='#fff ...
html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程
这篇文章主要为大家详细介绍了HTML5网页placeholder美化input背景提示文字教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 今天要给大家介绍的 ...
HTML input 文本框添加提示文字的方法
周未休息,感觉没啥可写的,就水一篇文章吧,说一说前端 html 页面中 input 元素中在没有值的情况下,添加提示的文字,当要输入文字的时候,提示的文字消失. 关于 html input 输入框的提 ...
axure文本框单击提示文字消失_Axure基础原件使用
本内容从网上搜索,仅供参考学习 1. 添加元件到工作区在左侧元件中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置上松开. 2. 添加元件名称在检视面板的元件名称文本框中输入元件自定义名称. ...
html密码框输入内容隐藏,密码框显示提示文字的功能实现
在密码输入框内显示提示的文字,引导用户操作,实现的效果如下图显示. 未输入密码前: 输入密码后: 由于js无法直接控制input文本框中的type属性,因此无法通过js控制input文本框在密码框和普 ...
QT 如何设置 QLineEdit 背景提示文字
设置QLineEdit背景提示文字: ui->lineEditType->setPlaceholderText("请输入用户名"); 设置背景提示文字的颜色或者字体大小 ...
HTML5中input输入框默认提示文字向左向右移动
HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码 <style>* {margin: 0;padding: 0;}.sousuo {width: 458p ...
使用 JQUERY 为文本框增加提示文字
为什么80%的码农都做不了架构师?>>> /*** 文本框提示文字* @author zhuhu*/function inpHint(idStr,valStr){var idA ...
input框灰色提示字,输入时提示字消失
在input属性中加入下面这段代码 value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style ...

input 框背景提示文字

input 框背景提示文字相关推荐

最新文章

热门文章