通过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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 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/05/19 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
python字符串的常用操作方法小结
2016/05/21 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python处理中文标点符号大集合
2018/05/14 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
详解python with 上下文管理器
2020/09/02 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
化工工艺专业求职信
2013/09/22 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
校庆团日活动总结
2014/08/28 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
大学生自荐书范文
2015/03/05 职场文书
消防宣传标语大全
2015/08/03 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
新手初学Java List 接口
2021/07/07 Java/Android
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android