通过js修改input、select默认字体颜色


Posted in Javascript onApril 19, 2017

textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失

<textarea cols="50" rows="5" id="textarea" onfocus="if(value=='获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" onblur="if (value ==''){value='元素焦点消失';document.getElementById('textarea').style.color='#999'}">输入您要输入的内容</textarea>

select默认选中项颜色为灰色,选择后变为黑色(js实现)

<script>
var unSelected = "#999";
var selected = "#333";
$(function () {
$("select").css("color", unSelected);
$("option").css("color", selected);
$("select").change(function () {
var selItem = $(this).val();
if (selItem == $(this).find('option:first').val()) {
$(this).css("color", unSelected);
} else {
$(this).css("color", selected);
}
});
})

</script>

input有默认值,且为灰色,点击后默认值消失,输入值变为黑色

<script type="text/javascript">

$(function() {
  //集体调用类型为text的input
  $(".form input[text]").each(function(){
    $(this).setDefauleValue();
  });
  //单个调用
  $("#key").setDefauleValue();
})
 
//设置默认值
$.fn.setDefauleValue = function() {
  var defauleValue = $(this).val();
  $(this).val(defauleValue).css("color","#eee");
 
  return this.each(function() {   
    $(this).focus(function() {
      if ($(this).val() == defauleValue) {
        $(this).val("").css("color","#000");//输入值的颜色
      }
    }).blur(function() {
      if ($(this).val() == "") {
        $(this).val(defauleValue).css("color","#999");//默认值的颜色
      }
    });
  });
}
</script>
</head>
 
<body>
<form class="form">
 <input type="text" size="30" value="输入账户">
 <br>
 <input type="text" size="30" value="输入密码">
</form>
<br>
<br>
<br>
<input type="text" size="30" id="key" value="输入手机号">
Javascript 相关文章推荐
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
理解javascript异步编程
Jan 27 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
JS中Attr的用法详解
Oct 09 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 #Javascript
javascript 的变量、作用域和内存问题
Apr 19 #Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 #Javascript
javascript 中null和undefined区分和比较
Apr 19 #Javascript
jQuery Plupload上传插件的使用
Apr 19 #jQuery
Vuex之理解Mutations的用法实例
Apr 19 #Javascript
Vuex之理解Getters的用法实例
Apr 19 #Javascript
You might like
PHP的可变变量名的使用方法分享
2012/02/05 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python numpy库np.percentile用法说明
2020/06/08 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
制药工程专业职业生涯规划范文
2014/03/10 职场文书
市场总经理岗位职责
2014/04/11 职场文书
个人综合鉴定材料
2014/05/23 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
Python利用folium实现地图可视化
2021/05/23 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript