iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS实现点击文本框改变背景颜色
  • 678
分享到

JS实现点击文本框改变背景颜色

摘要

本文实例为大家分享了js实现点击文本框改变背景颜色的具体代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html>     &l

本文实例为大家分享了js实现点击文本框改变背景颜色的具体代码,供大家参考,具体内容如下

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>文本框获焦点改变背景颜色</title>
    </head>
    <body>
        <table align="center"width="337" height="204"border=()>
        <tr>
            <td width="108">用户名</td>
        <td width="213"><fORM name="form1"method="post"action="">
            <input type="text"name="textfield"onfocus="txtfocus()"onBlur="txtblur()">
        </form></td>
        </tr>
        <tr>
            <td >密码</td>
        <td ><form name="form2"method="post"action="">
            <input type="text"name="textfield2"onfocus="txtfocus()"onBlur="txtblur()">
        </form></td>
        </tr>
        <tr>
            <td >真实姓名</td>
        <td ><form name="form3"method="post"action="">
            <input type="text"name="textfield3"onfocus="txtfocus()"onBlur="txtblur()">
        </form></td>
        </tr>
        <tr>
            <td >性别</td>
        <td ><form name="form4"method="post"action="">
            <input type="text"name="textfield5"onfocus="txtfocus()"onBlur="txtblur()">
        </form></td>
        </tr>
        <tr>
            <td >邮箱</td>
        <td ><form name="form5"method="post"action="">
            <input type="text"name="textfield4"onfocus="txtfocus()"onBlur="txtblur()">
        </form></td>
        </tr>
        </table>
        <script language="javascript">
            <!--
            function txtfocus(event){
                var e=window.event;
                var obj=e.srcElement;
                obj.style.background="#FF9966";
            }
            function txtblur(event){
                var e=window.event;
                var obj=e.srcElement;
                obj.style.background="#FFFFFF";
            }
            //-->
        </script>
        
    </body>
</html>

结果如图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JS实现点击文本框改变背景颜色

本文链接: https://www.lsjlt.com/news/172135.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS实现点击文本框改变背景颜色
    本文实例为大家分享了JS实现点击文本框改变背景颜色的具体代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html>     &l...
    99+
    2022-11-13
    JS改变背景颜色 JS点击改变背景颜色 JS点击文本框改变颜色
  • css如何实现点击div改变背景颜色
    这篇文章主要讲解了“css如何实现点击div改变背景颜色”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何实现点击div改变背景颜色”吧!在css中,...
    99+
    2024-04-02
  • html点击按钮改变背景颜色怎么实现
    html点击按钮改变背景颜色的实现方法:1.创建一个html文件;2.在html文件中添加html代码架构;3.在body标签里面使用input标签实现一个按钮;4.在html标签里面添加script标签并设置点击按钮改变颜色的功能;5.通...
    99+
    2024-04-02
  • AngularJs如何实现点击状态值改变背景色
    这篇文章主要介绍AngularJs如何实现点击状态值改变背景色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例如下://更改边框颜色的代码  $("#...
    99+
    2024-04-02
  • css实现点击改变颜色的方法
    本篇文章和大家了解一下css实现点击改变颜色的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构...
    99+
    2023-06-14
  • javascript怎么实现点击改变按钮颜色
    本篇内容主要讲解“javascript怎么实现点击改变按钮颜色”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript怎么实现点击改变按钮颜色”吧!1. HTML基础首先,我们需要创建...
    99+
    2023-07-06
  • CSS怎么更改选中文本的背景颜色
    这篇文章主要介绍“CSS怎么更改选中文本的背景颜色”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS怎么更改选中文本的背景颜色”文章能帮助大家解决问题。1. 禁用用户选中一个元素(element)...
    99+
    2023-06-27
  • css怎么实现背景颜色渐变效果
    本文小编为大家详细介绍“css怎么实现背景颜色渐变效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“css怎么实现背景颜色渐变效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。首先,在页面中创建一个div标签;...
    99+
    2023-07-04
  • html点击按钮改变字体颜色怎么实现
    html点击按钮改变字体颜色的实现方法:1.创建一个html文件;2.在html文件中添加html代码架构;3.在body标签里面使用button标签实现一个按钮,并使用style给按钮添加样式以及使用onclick点击事件;4.在html...
    99+
    2024-04-02
  • CSS容器背景如何实现颜色渐变
    这篇文章主要介绍了CSS容器背景如何实现颜色渐变,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。语法background: linear-gradient(direc...
    99+
    2023-06-08
  • vue如何实现点击按钮切换背景颜色的效果
    不懂vue如何实现点击按钮切换背景颜色的效果?其实想解决这个问题也不难,下面让小编带着大家一起学习怎么去解决,希望大家阅读完这篇文章后大所收获。用vue简单的实现点击按钮切换背景颜色,具体代码如下所示:<div class="...
    99+
    2023-05-30
  • Vue使用ElementUI动态修改table单元格背景颜色或文本颜色
    目录前言给table增加cell-style属性修改一行颜色只修改某个属性颜色总结前言 今天遇到一个场景,表格行属性的字典项要针对不同的状态,展示不同的文本颜色,如下图所示: 账号状...
    99+
    2023-02-06
    Vue Element table背景颜色 Element table文本颜色
  • JavaScript怎么实现单击按钮后更改背景颜色的功能
    本篇内容主要讲解“JavaScript怎么实现单击按钮后更改背景颜色的功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript怎么实现单击按钮后更...
    99+
    2024-04-02
  • JS怎么实现点击目录名变换颜色的效果
    本篇内容主要讲解“JS怎么实现点击目录名变换颜色的效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现点击目录名变换颜色的效果”吧! ...
    99+
    2024-04-02
  • CSS怎么改变网页中鼠标选中文字背景颜色
    本篇内容主要讲解“CSS怎么改变网页中鼠标选中文字背景颜色”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么改变网页中鼠标选中文字背景颜色”吧!一个不是那...
    99+
    2024-04-02
  • css怎么实现点击元素变更颜色
    这篇文章主要介绍“css怎么实现点击元素变更颜色”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css怎么实现点击元素变更颜色”文章能帮助大家解决问题。两种方法:active,元素点击时变色,但点击后...
    99+
    2023-06-30
  • 如何实现在shell或者perl中改变字体或背景的颜色
    本篇内容介绍了“如何实现在shell或者perl中改变字体或背景的颜色”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在shell下提到终端的...
    99+
    2023-06-09
  • JS中如何实现控制button颜色随点击更改功能
    这篇文章主要介绍了JS中如何实现控制button颜色随点击更改功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。先上效果图:默认“今日”是选...
    99+
    2024-04-02
  • 用JavaScript实现变色背景和文字(转)
    用JavaScript实现变色背景和文字  制作变色背景和文字的JavaScript代码有很多种,不过大多数背景颜色变化时有跳跃感,不够柔和。本例的效果特别酷!请看效果:背景请用bgcolor参数,前景文字请用fgcolor参数。全部代码如...
    99+
    2023-06-03
  • 如何用jquery实现点击改变文本
    本文小编为大家详细介绍“如何用jquery实现点击改变文本”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何用jquery实现点击改变文本”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作