数码资讯

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

2023-07-25 阅读 285

textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失 <strong>选购提示</strong> <span>关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。</span> </div> <div class="article-body"> <p>textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失</p> <pre class="brush:js;"> <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> </pre> <p>select默认选中项颜色为灰色，选择后变为黑色（js实现）</p> <pre class="brush: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></pre> <p>input有默认值，且为灰色，点击后默认值消失，输入值变为黑色</p> <pre class="brush:js;"> <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="输入手机号"></pre> <p></p> </div> <div class="article-note"> <strong>声明：</strong>本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。 </div> <nav class="article-pn" aria-label="上下篇"> <div class="pn-item">上一篇：<a href="/b/135867.html" title="在PS里制作一把可爱又漂亮的钥匙">在PS里制作一把可爱又漂亮的钥匙</a></div> <div class="pn-item">下一篇：<a href="/b/135869.html" title="wps文字如何同时打开两个文档wps文字同时打开两个文档的方法">wps文字如何同时打开两个文档wps文字同时打开两个文档的方法</a></div> </nav> <nav class="article-after" aria-label="相关文章"> <div class="section-title">同栏目相关推荐</div> <ul class="related-list"> <li><a href="/b/749577.html" title="有哪些ai工具制作logo比较方便">有哪些ai工具制作logo比较方便</a></li> <li><a href="/b/749522.html" title="如何保护计算机免受USB黑客攻击">如何保护计算机免受USB黑客攻击</a></li> <li><a href="/b/749322.html" title="s8分屏快捷键(三星s8能分屏操作)">s8分屏快捷键(三星s8能分屏操作)</a></li> <li><a href="/b/749315.html" title="怎么设置傲游浏览器智能填表傲游云浏览器如何智能填表">怎么设置傲游浏览器智能填表傲游云浏览器如何智能填表</a></li> <li><a href="/b/749311.html" title="wps跳转到相应页面(使wps中自动生成的目录有直接跳转到目录对应内容的页面)">wps跳转到相应页面(使wps中自动生成的目录有直接跳转到目录对应内容的页面)</a></li> <li><a href="/b/749309.html" title="计算机截图快捷键(计算机截图快捷键win7)">计算机截图快捷键(计算机截图快捷键win7)</a></li> </ul> </nav> </article> <div class="layui-col-md4"> <aside class="sidebar"> <section class="side-box side-ad"> <div class="side-title">广告与合作</div> <div class="ad-placeholder"> <strong>品牌合作位</strong> <p>支持数码产品、手机配件、智能硬件、软件服务等合作展示。</p> <span>联系站长投放广告</span> </div> </section> <section class="side-box"> <div class="side-title">推荐阅读</div> <ul class="side-list"> <li><a href="/b/749580.html" title="2026年换手机怎么选：处理器、屏幕、影像和续航四项参数一次看懂">2026年换手机怎么选：处理器、屏幕、影像和续航四项参数一次看懂</a></li> </ul> </section> <section class="side-box"> <div class="side-title">热门主题</div> <div class="topic-list"> <a class="" href="/">首页</a> <a class="" href="/93230406/">手机</a> <a class="" href="/93230407/">电脑办公</a> <a class="" href="/93230408/">智能硬件</a> <a class="" href="/93230409/">数码配件</a> <a class="" href="/93230410/">摄影音频</a> <a class="active" href="/93230411/">数码资讯</a> </div> </section> </aside> </div> </div> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"通过js修改input、select默认字体颜色","description":"textarea默认字颜色以及获取焦点后的字的颜色，焦点获取后使默认消失 <textarea cols=\"50\" rows=\"5\" id=\"textarea\" onfocus=\"if(value=='获取到元素焦点'){value='';document.getElementById('textar","url":"https://www.shuma8.com/b/135868.html","mainEntityOfPage":"https://www.shuma8.com/b/135868.html","author":{"@type":"Organization","name":"数码吧","url":"https://www.shuma8.com/"},"publisher":{"@type":"Organization","name":"数码吧","logo":{"@type":"ImageObject","url":"https://www.shuma8.com/apple-touch-icon.png"}},"datePublished":"2023-07-25","dateModified":"2023-07-25"}</script> <footer class="site-footer"> <div class="layui-container footer-inner"> <div> <strong>数码吧</strong> <p>聚合手机、数码产品、智能硬件与消费电子内容，帮助用户更快完成了解、比较和购买决策。</p> </div> <div class="footer-links"> <a href="/">首页</a> <a href="/sitemap.xml">网站地图</a> <span>© 2026 www.shuma8.com</span> </div> </div> </footer> <script src="/class/layui/layui.js"></script><script> layui.use(['jquery'], function(){ var $ = layui.$; $('.nav-toggle').on('click', function(){ $('.site-nav').toggleClass('open'); }); }); </script>  <script>(function(){var cltj=document.createElement("script");cltj.src="//www.shuma8.com/tongji/?v=1.4";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(cltj,s);})();</script></body> </html>