通过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 相关文章推荐
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
javascript 回调函数详解
Nov 11 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
js基于canvas实现时钟组件
Feb 07 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
Yii清理缓存的方法
2016/01/06 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
python编程实现希尔排序
2017/04/13 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Django xadmin安装及使用详解
2020/10/26 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
总经理助理的八要求
2013/11/12 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书