通过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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
c#中的实现php中的preg_replace
2009/12/21 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
手术室护士自我鉴定
2013/10/14 职场文书
文明教师事迹材料
2014/01/16 职场文书
机械个人求职信范文
2014/01/24 职场文书
无故旷工检讨书
2014/01/26 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
详解Python牛顿插值法
2021/05/11 Python