在HTML的text input控件获取焦点时设置背景颜色 - 星云互动 - ITeye博客

`

zlpx

浏览: 157154 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

f308185993： 123123<table class="bbc ...
在HTML的text input控件获取焦点时设置背景颜色
crackajack_zg： good ，很简单的代码、
用JQuery改变图片的透明度
qq184234675：求jquery1.9+的
用JQuery改变图片的透明度
demonzoo：很奇怪，我刚试了无数次，在本地直接打开就是无法弹出提示。后来我 ...
用HTML5产生操作系统通知
demonzoo：为什么我在chrome下无法显示通知内容，无论按哪个按钮都是弹 ...
用HTML5产生操作系统通知

在HTML的text input控件获取焦点时设置背景颜色

博客分类：

HTML5

阅读更多

下面的例子展示了在HTML的text input控件获取焦点时设置背景颜色。通过设置background-color样式和:focuse 伪选择器（pseudo-selector）.

<!DOCTYPE html>
<html>
<head>
    <title>Setting the background color on a focused HTML text input control</title>
    <style type="text/css">
        input:focus {
            background-color: #FF6;
        }
    </style>
</head>
<body>
 
    <form>
        <label>First name: <input id="fname" type="text" autofocus placeholder="required" /></label><br/>
        <label>Last name: <input id="lname" type="text" placeholder="required" /></label><br/>
        <label>User name: <input id="uname" type="text" placeholder="required" /></label><br/>
        <label>Password: <input id="psswd" type="password" placeholder="required" /></label><br/>
    </form>
 
</body>
</html>

源码下载：

在HTML的text input控件获取焦点时设置背景颜色.zip

分享到：

将javascript对象转换为JSON字符串 | 在HTML5中定制数据属性

2012-04-24 12:46
浏览 13351
评论(1)
分类:Web前端
查看更多

评论

1 楼 f308185993 2015-09-25

123123[size=xx-small][color=darkr[color=red]

[flash=200,200][img][url][list]

[*]

引用
[u][i][b][/b][/i][/u]

[/list][/url][/img][/flash]

[/color]ed][/color][/size]

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

C#控件中失去焦点Focus事件与获得焦点Focus事件: 这通常发生在用户点击控件、按下Tab键导航到该控件，或者因为其他控件失去焦点而使该控件自动获取焦点时。在TextBox中，"GotFocus"事件可用于初始化某些状态，比如高亮选中所有文本，或者显示提示信息。以下是使用...

HTML日期选择控件: 在描述中提到，给input添加获得焦点事件可以触发控件。这是通过JavaScript实现的一种常见交互方式，当用户点击输入框时显示日期选择控件。例如，使用原生JavaScript的`addEventListener`方法： ```javascript ...

很漂亮又实用的的Input框，支持CSS或者图片两种样式。: 5. **伪类选择器**：利用`:focus`伪类可以改变输入框获取焦点时的样式，增强用户体验。 ```css input:focus { outline: none; /* 隐藏默认的焦点边框 */ border-color: #007BFF; } ``` 除了CSS，还可以使用...

asp.net中TextBox获得焦点和失去焦点——客户端JavaScript事件: 在ASP.NET中，由于服务器控件在客户端的ID可能会改变，我们需要使用`ClientID`属性来获取TextBox在HTML中的实际ID，以便于JavaScript可以正确地找到它。除了直接使用JavaScript，还可以结合ASP.NET的Web Methods...

Web-前端html+css从入门到精通 128. 表单扩展之新input控件.zip: 此外，`placeholder`属性用于提供输入提示，`autofocus`让指定的输入框在页面加载时自动获取焦点。总的来说，掌握HTML5的新input控件是现代Web前端开发者的必备技能。通过深入学习和实践，可以提升网页的交互性和...

动态获取控件数据: 在C#的客户端/服务器（C/S）架构中，动态获取控件数据是常见的需求，尤其是在构建用户界面和实现自动化数据处理时。本项目“动态获取控件数据”旨在演示如何在C#环境下灵活地从各种控件中提取信息，以便进行滤值处理...

js时间控件大全只显示年月: 在实现这两个控件时，开发者可能使用了HTML5的`<input type="date">`元素，虽然原生的HTML5日期控件不支持自定义显示格式，但可以通过JavaScript进行扩展和覆盖。另一种可能的方法是使用第三方库，如jQuery UI的...

enter键控制input光标移动到下一个框: 这段代码首先获取所有`type="text"`的`<input>`元素，并为它们的`keyup`事件绑定一个处理函数。当用户在某个输入框中按下"Enter"键时，事件处理函数会防止默认的表单提交行为，并计算出下一个应该获得焦点的输入框。...

VB 用Text属性做输入和输出: 在VB中，你可以利用控件的事件来响应用户的行为，比如当用户按下Enter键或者控件失去焦点时。例如，可以监听TextBox的KeyDown事件，当用户按下Enter键时，获取输入并执行相应操作： ```vb Private Sub txtInput_...

文本框控件: 在各种操作系统和编程语言中，都有相应的文本框控件实现，如Windows的TextBox，HTML的input元素等。这些控件通常用于收集用户输入的数据，如登录密码、邮箱地址、搜索关键词等，也可以用于显示程序生成的文本信息。 ...

jquery注册文本框获取焦点清空,失去焦点赋值的简单实例: 例如，可以通过CSS设置文本框的样式（如字体大小、颜色、边框样式等），以及在文本框获得或失去焦点时改变背景色或其他视觉样式，以增强用户的交互感受。知识点三：jQuery基础 jQuery是一个快速、简洁的JavaScript...

asp.net控件小技巧: 在这个例子中，当文本框获取焦点时，会检查当前值是否等于默认值“mm”，如果是，则清空该值以便用户输入。 - **`onChange`**：当元素的值发生变化时触发。 - **`onSelect`**：当元素被选中时触发。 #### 示例应用 ...

jquery获取input type=text中的值的各种方式(总结): 本篇文章将详细总结在使用jQuery获取input type="text"元素中的值时的各种方法。首先需要了解的是，在HTML中，input元素通常用来创建各种表单控件，其中input type="text"就是用来创建单行文本输入框。jQuery提供...

css3酷炫input框: 2. **伪类选择器**：`:hover`、`:focus`、`:active`等伪类选择器可以分别控制鼠标悬停、获取焦点和按下状态时input框的样式，使得用户交互更具有反馈感。 3. **阴影效果**：CSS3的`box-shadow`属性可以创建输入框的...

微信小程序 input输入框控件详解及实例（多种示例）: - 使用`style`属性直接在标签内添加内联样式，如背景色、字体大小等。 5. **表单提交与重置** - `form`组件可以包含多个`input`，通过`bindsubmit`绑定提交事件，例如： ```html ... ``` - `bindreset`...

jquery时间控件（含小时分钟）: 3. **初始化时间控件**：在jQuery的`$(document).ready()`函数中，使用`.timepicker()`方法初始化时间控件，并根据需要设置选项。 ```javascript $(document).ready(function () { $('#timepicker').timepicker({ ...

Android动态添加EditText，并且可设置其背景: 要设置EditText的背景，可以使用`setBackgroundColor(int color)`来设置纯色背景，或者使用`setBackgroundResource(int resid)`来设置从资源文件中获取的图片背景。例如： ```java // 设置纯色背景 editText....

Android应用源码之5.EditText控件学习.zip: EditText可以通过`requestFocus()`方法主动获取焦点，`selectAll()`选择所有文本，`setSelection(int)`则可以在特定位置设置光标。 12. 自定义键盘：如果需要自定义键盘，可以通过`InputMethodService`实现。 ...

Android控件: - 属性：除了基本的text属性设置按钮文字外，还可以设置android:background改变按钮背景，android:onClick指定按钮被点击时执行的方法。 - 事件处理：在XML中通过onClick属性指定方法名，或者在Java代码中为按钮...

使用js判断控件是否获得焦点: // 获取焦点元素的ID var focusedId = $(document.activeElement).attr("id"); // 检查输入框#textID是否获得焦点 if (focusedId === "textID") { alert("true"); } else { alert("false"); } ``` 此外，jQuery...

Global site tag (gtag.js) - Google Analytics