js动态设置输入框字体/颜色

最新推荐文章于 2024-04-25 10:51:54 发布
最新推荐文章于 2024-04-25 10:51:54 发布
阅读量1.2w 收藏 5
点赞数 2
文章标签： input background-color 动态设置颜色 js
[html]  view plain copy
  1. 动态设置文本框颜色：  
[html]  view plain copy
  1. 主要是利用javascript中的触发事件onfocus和onblur  
  2.   
  3. <script language="javascript" type="text/javascript">  
  4.       <!--  
  5.          function myFocus(obj,color){  
  6.   
  7.              //判断文本框中的内容是否是默认内容  
  8.   
  9.   
  10.              if(obj.value=="请输入收件人地址"){  
  11.                obj.value="";  
  12.              }  
  13.   
  14.              //设置文本框获取焦点时候背景颜色变换  
  15.              obj.style.backgroundColor=color;  
  16.          }  
  17.   
  18.   
  19.          function myblur(obj,color){  
  20.   
  21.              //当鼠标离开时候改变文本框背景颜色  
  22.              obj.style.background=color;  
  23.          }  
  24.   
  25.    
  26.   
  27. 在input标签中  
  28.   
  29. <input type="text" name="username" id="username" onfocus="myFocus(this,'#f4eaf1')" onblur="myblur(this,'white')" value="请输入收件人地址"/>  
  30.   
  31. 用上述简单方法可以做到文本框背景颜色的变换和提示信息的清除  

转自：http://blog.sina.com.cn/s/blog_78c47a0d0100qiia.html

 

[html]  view plain copy
  1. 动态设置字体颜色  
[html]  view plain copy
  1. <html>  
  2.   
  3. <body>  
  4. <script language="javascript" type="text/javascript">  
  5. function test(obj)  
  6. {  
  7.     if( obj.value!="test" ){  
  8.         document.getElementById("inputbox").className= "input_s1";  
  9.     }else{  
  10.         document.getElementById("inputbox").className = "input_s2";  
  11.     }  
  12. }  
  13. </script>  
  14. <style>     
  15.   .input_s1 {font-size:20;color:red; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}    
  16.   .input_s2 {font-size:20;color:black; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}    
  17.  </style>  
  18. <center>  
  19.   
  20. <br>  
  21. <form method="get" action="returnpage.php" >  
  22. <input id="inputbox" type='text' class="input_s1"  value="test"  maxlength='300' size='40'  name='qw' onclick="test(this)"/>  
  23. <input type="submit" value="搜一下">  
  24. <br>  
  25. </center>  
  26. </body>  
  27. </html>  
  28.   
  29. 转自：<a href="http://topic.csdn.net/u/20080804/19/dec089b3-59e5-481c-b5d8-b4e3c4949078.html">http://topic.csdn.net/u/20080804/19/dec089b3-59e5-481c-b5d8-b4e3c4949078.html</a>  

 

自己修改的一个，功能：文本框默认字体浅色，获取焦点时候清空文本框，输入文字变黑色，失去焦点判断文本框，重新回到浅色字体

function test(obj)
{
    if( obj.value!="CAS/NAME/CATALOG" ){
     document.getElementById("productParam").value="";
        document.getElementById("productParam").className="input_s2";
    }else{
     document.getElementById("productParam").value="";
        document.getElementById("productParam").className ="input_s2";
    }
}

function onBluet(obj){
 if(obj.value == ""){
  document.getElementById("productParam").value="CAS/NAME/CATALOG";
  document.getElementById("productParam").className ="input_s1";
 }else{
  document.getElementById("productParam").className ="input_s1";
 }
}

 

<style>   
  .input_s1 {font-size:20;color:#949494; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} 
  .input_s2 {font-size:20;color:black; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} 
 </style>

 

<input class="input_s1" id="productParam" name="productParam" οnkeyup="enterLogin(event);" type="text" value="CAS/NAME/CATALOG" οnclick="test(this)" οnblur="onBluet(this)"/></td>


转载自：http://blog.csdn.net/yy_2011/article/details/7663342



王小磊
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态表格数据动态设置颜色
l_blackeagle的博客
12-21 7799
首先需求是这样的： 831331048160200 - 北京 超过2800w显示红色 831331048160198 - 天津 不限制 831290048160214 - 广州 超过2000w显示红色 数据是同一属性的不同id 以及不同的名称： 所以查出来的数据为一个属性下面不同的值： 比如： 球 球的号码 不同 设置几号几号为什么颜色 几号几号
js模拟Confirm、alert弹框,可以修改文字颜色。
07-19
可以直接调用，操作方便，调用代码如下： jConfirm('Can you confirm this，<span am red.?', 'Confirmation Dialog', function(r) { });
JS 动态修改hover的字体颜色
Jana Jing的分享
08-02 1862
<template> <div> <div v-for="(item,index) in demo" :key="index"> <span class="label" :style="changeHover(item.color)">{{item.desc}}</span> </div> </div> </template> <script> export de.
前端input输入时边框颜色更改
最新发布
weixin_46229676的博客
04-25 609
1. 当聚焦与input框需要输入的时候，需要特定的边框颜色。2.翻页时的el-pagination的翻页按钮的颜色更改。3.el-menu背景样式更改（原始图，选择图，悬浮图）
使用 JavaScript 根据输入值调整输入字段 (HTML) 的 (CSS) 中的文本颜色
湖北太米网络科技有限公司
09-04 324
可以通过以下代码使用 JavaScript 根据输入值调整输入字段的文本颜色：HTML：<input type="text" id="myInput" oninput="changeTextColor()" placeholder="Enter a value">CSS：#myInput { color: ...
点击按钮修改input文字及其颜色，按钮的文字也会随之改变
09-17
点击按钮修改input文字及其颜色，按钮的文字也会随之改变
javascript动态设置样式style实例分析
10-24
在JavaScript中，动态设置样式style是一种常见的操作，它允许开发者在运行时改变元素的外观。通过修改元素的`style`对象，我们可以直接控制CSS样式。下面我们将详细讨论这个主题，并通过实例来分析其中的易错点和...
JS中解决谷歌浏览器记住密码输入框颜色改变功能
10-20
主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
修改输入框placeholder文字默认颜色-webkit-input-placeholder方法
12-13
上述代码中，`#999999` 是我们想要设置的新颜色，你可以根据自己的需求更改这个值。为了确保在所有支持`placeholder`属性的浏览器中都能正常工作，你需要将这三个选择器都包含在你的CSS文件中。 需要注意的是，虽然...
Vue.js实现输入框绑定的实例代码
12-11
接着，CSS样式定义了一个提示框（tooltip）的样式，包括背景颜色、阴影、边框等，还有输入框(input)的样式，比如无边框、填充、字体大小和颜色等。这展示了Vue.js可以方便地结合CSS来定制用户界面。 在`<body>`部分...
JavaScript仿支付宝6位数字密码输入框
10-20
每个假输入框的样式设置为具有边框、填充、字体大小和颜色等，以模拟真实输入的视觉效果。 最后，行为层（JavaScript）是实现该功能的关键。通过监听真实输入框的`input`或`keyup`事件，我们可以实时更新每个假...
css3实现input输入框颜色渐变发光效果代码
09-25
css3都推出好久了，虽然各大主流浏览器对其兼容性还不是很好，特别是IE…但通过添加-moz- -webkit-这样的前缀可以在chrome和Firefox下获得更好的效果，还是Transition实现的过渡效果
关于通过JS变更文本框内文字与颜色
m0_46150601的博客
05-18 2306
新人程序猿，望大家指导，轻喷，谢谢！ (因为公司内外网隔离，无法复制粘贴，所有代码都是手敲的) 曾经有个文本框 <input id="inputId" style="line-height: 22px;" class='easyui-validatebox' > 想要在文本框内实现输入提示的功能 最开始想用placeholder去实现，但发现easyui好像不支持placeholder，所以就自己用js去实现，好在也不复杂。 在htm里添加了onclick和onblur方法调用，变成如下： &
自定义输入框，按钮边框，颜色
adfsadsfa的专栏
09-17 468
设置输入框或者按钮background 新建btn_press.xml
c语言文本框字体颜色,自定义UITextField实现编辑输入框时里面文字颜改变
weixin_31364787的博客
05-16 514
简介本文要实现的效果是当编辑TextField输入框的时候，里面的文字颜色和占位文字颜色不一样，达到一个提醒的效果。在默认情况下，UITextField里面的的文字在输入文字的时候颜色是不会改变的。这个时候可以通过runtime来实现效果。效果图没有设置之前的效果没有设置之前的效果设置之后的效果设置之后点击输入框文字颜色改变了运行时(runtime)在动手之前先简单了解runtime的概念：苹果官...
JS控制input颜色
GRJ123
09-21 1759
需求：          多个 input 标签（border为蓝色） ，某个input在获得焦点时，border的颜色发生改变（border为红色），失去焦点后border变回蓝色 效果图： 代码：                        .onblur1 {                          border:1px solid bl
css输入框提示文字颜色,CSS3自定义input光标及placeholder提示文字颜色
weixin_39864601的博客
08-04 2365
美化input对与前端工程师来说会经常碰到，那么如何通过css3来自定义input光标，placeholder提示文字，颜色等属性呢？其实css3里提供了专门的规则属性来实现input的自定义化，来帮助前端工程师最大程度的还原视觉设计稿，具体实现代码如下：css代码由于不同的浏览器兼容性不同，所以针对不同的浏览器有不同的写法/*通用*/::-webkit-input-placeholder{...
js改变字体颜色_前端更换自定义主题颜色的解决方案
weixin_28717431的博客
11-28 1702
我的一个产品化项目里产品提了一个需求就是可以更换主题颜色，不说废话直接上干货。 原理就是通过颜色选择器用户可以在页面选择指定的颜色然后通过js操作css变量覆盖。如果需要永久更换需要后端的配合吧选择的颜色传递给后端，然后每次页面初始化的时候再通过js操作css变量 首先把项目里所有的需要更换的主题css集合到一个样式文件里，这里运用了css的原生变量。:ro...
在js方法中改变文本输入框text的字体和背景颜色
u013455166的专栏
01-21 4393
在做项目时遇到需要通过鼠标触发事件，然后在js函数中改变text文本域的颜色，下面是具体的操作，写下来帮助记忆： function setColor (where, Color) { if (where == "backgroundcolour") document.getElementById('textarea').style.backgroundColor = C...
写一个动态样式的input输入框
09-17
### 回答1： <input type="text" style="width:100%;height:30px;border:1px solid #ccc;border-radius:5px; padding:3px;"> ### 回答2： 要创建一个动态样式的input输入框，可以使用HTML和CSS来实现。以下是一个简单的示例： 首先，在HTML中创建一个input元素： ```html <input type="text" id="dynamic-input"> ``` 接下来，在CSS中定义input输入框的样式，并添加动画效果： ```css #dynamic-input { border: 2px solid #ccc; padding: 10px; transition: border-color 0.3s ease; } #dynamic-input:focus { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; } ``` 在这个例子中，input输入框的初始样式为灰色边框和内边距。当输入框被选中时（即获得焦点），边框颜色将以0.3秒的过渡效果变为红色，并且会产生一个红色阴影。 保存上述代码为一个HTML文件，在浏览器中打开该文件，你将看到一个动态样式的输入框。当输入框获得焦点时，边框将变为红色，并且会有一个阴影效果。 ### 回答3： 动态样式的input输入框是指当用户在输入框中输入内容时，输入框的样式会发生变化。下面是一个实现动态样式的input输入框的示例代码： HTML部分： ```html <input id="dynamic-input" type="text" placeholder="请输入内容"> ``` CSS部分： ```css #dynamic-input { padding: 10px 15px; border: 2px solid gray; } #dynamic-input:focus { border-color: blue; box-shadow: 0 0 5px blue; } ``` JavaScript部分： ```javascript const dynamicInput = document.querySelector('#dynamic-input'); dynamicInput.addEventListener('input', function() { if (dynamicInput.value.trim() !== '') { dynamicInput.classList.add('has-content'); } else { dynamicInput.classList.remove('has-content'); } }); ``` 上述代码实现了以下功能： 1. 输入框初始化时，显示灰色边框。 2. 当输入框获取焦点时，边框变为蓝色，并增加蓝色的阴影效果。 3. 当用户在输入框中输入内容时，会动态地判断输入框是否有内容，并为输入框添加或移除`has-content`类。 4. 当输入框有内容时，可以通过CSS选择器`.has-content`对输入框进行特殊样式的设置，例如字体颜色等，以达到动态样式的效果。 这样，当用户在输入框中输入内容时，输入框的样式会根据是否有内容进行相应的变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值