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

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="输入手机号">
赞 (0)

相关推荐

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

    textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失 <textarea cols="50" rows="5" id="textarea" onfocus="if(value=='获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" onblur="if (value ==''){value='

  • js修改input的type属性问题探讨

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是

  • js修改input的type属性及浏览器兼容问题探讨与解决

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是

  • Ext修改GridPanel数据和字体颜色、css属性等

    Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 复制代码 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 复制代码 代码如下: selectedRow.set("key","value"); 修改背景色,首先获取行号,然后获取行的view对象: 复制代码 代码如下: var selectedIdx

  • iOS中修改UITextField占位符字体颜色的方法总结

    iOS中修改UITextField占位符字体颜色的方法总结

    前言 最近学了UITextField控件, 感觉在里面设置占位符非常好, 给用户提示信息, 于是就在想占位符的字体和颜色能不能改变呢?下面是小编的一些简单的实现,有需要的朋友们可以参考. 修改UITextField的占位符文字颜色主要有三个方法: 1.使用attributedPlaceholder属性 @property(nullable, nonatomic,copy) NSAttributedString *attributedPlaceholder NS_AVAILABLE_IOS(6_0

  • iOS App开发中修改UILabel默认字体的方法

    iOS App开发中修改UILabel默认字体的方法

    在项目比较成熟的基础上,遇到了这样一个需求,应用中需要引入新的字体,需要更换所有Label的默认字体,但是同时,对于一些特殊设置了字体的label又不需要更换.乍看起来,这个问题确实十分棘手,首先项目比较大,一个一个设置所有使用到的label的font工作量是巨大的,并且在许多动态展示的界面中,可能会漏掉一些label,产生bug.其次,项目中的label来源并不唯一,有用代码创建的,有xib和storyBoard中的,这也将浪费很大的精力.这种情况下,我们可能会有下面两种处理方式. 一.普通方

  • iOS 修改alertViewController弹框的字体颜色及字体的方法

    系统默认的字体是黑色,按钮颜色是蓝色或者红色的,我们怎样自定义字体呢 Codeing Show UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:@"提示" message:@"确认退出登录?" preferredStyle:(UIAlertControllerStyleAlert)]; UIAlertAction *cancelAction = [UIAlertActi

  • listview改变选中行的字体颜色实例介绍

    目标:选中item,其字体设置为#3197FF,未选中的,其字体为#FFFFFF 与listvew设置选中行item背景图片一样,使用selector,不过这里的颜色设置,应该是在listview中的textview中设置. 复制代码 代码如下: <SPAN style="COLOR: #666666"><?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns

  • js获取及修改网页背景色和字体色的方法

    本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下

  • layer ui插件显示tips时,修改字体颜色的实现方法

    今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: <script src="/assets/js/layer/layer.js"></script> function showMessage(msg, domObj) { layer.tips(msg, domObj,{tips:3});//弹出框加回调函数 } s

随机推荐