编程 Javascript

通过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="输入手机号">

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

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

纯JAVASCRIPT图表动画插件Highcharts Examples

Apr 16 Javascript

类似天猫商品详情随浏览器移动的示例代码

Feb 27 Javascript

react.js CMS 删除功能的实现方法

Apr 17 Javascript

jQuery.form.js的使用详解

Jun 14 jQuery

Javascript实现跨域后台设置拦截的方法详解

Aug 04 Javascript

vue2+el-menu实现路由跳转及当前项的设置方法实例

Nov 07 Javascript

jQuery进阶实践之利用最优雅的方式如何写ajax请求

Dec 20 jQuery

Vue项目组件化工程开发实践方案

Jan 09 Javascript

vue 实现复制内容到粘贴板clipboard的方法

Mar 17 Javascript

微信小程序Flex布局用法深入浅出分析

Apr 25 Javascript

layui-select动态选中值的例子

Sep 23 Javascript

weui上传多图片,压缩,base64编码的示例代码

Jun 22 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