文本框样式（失去焦点和得到焦点）

最新推荐文章于 2025-04-28 17:02:45 发布

原创最新推荐文章于 2025-04-28 17:02:45 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#input #server #class

收录于

其它专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML文本框实现，在失去焦点时返回默认样式，在获得焦点时改变样式。这种交互方式常见于表单输入字段中，有助于提升用户体验。

<input id="txtUserName" runat="server" class="input" onblur="this.className='input'"
                                    onfocus="this.className='input_in'" type="text" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

勇敢的心515

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

DIV的失去焦点(blur)实现方法

09-22

主要介绍了DIV的失去焦点(blur)实现方法,用防抖实现DIV鼠标移出消失,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

CSS鼠标动作的五种状态[伪类选择器]

热门推荐

weixin_45203607的博客

04-30

1万+

title: CSS鼠标动作的五种状态[UI元素的伪类选择器] abbrlink: 29618 date: 2020-07-08 12:20:16 author: 胡安民 toc: true top: false cover: false summary: categories: Web reprintPolicy: cc_by keywords: 初始状态link,点击后visited,鼠标悬浮hover,点击后未释放状态active,鼠标聚焦focus,案例实现自定义下内容 tags: CSS .

CSS-事件 -单击双击、失去or获得焦点、加载事件、鼠标事件、键盘事件、选择与改变、表单事件

weixin_43998127的博客

10-13

4900

CSS事件 1.点击事件 1.1 onclick:单击事件 1.2 ondblclick:双击事件 2.焦点事件 2.1 onblur: 失去焦点 2.2 onfocus: 元素获得焦点 3.加载事件 onload: 一张页面或一幅图像完成加载。 4.鼠标事件 4.1 onmousedown 鼠标按钮被按下 4.2 onmouseup 鼠标按钮被松开 4.3 onmousemove 鼠标被移动 4.4 onmouseover 鼠标被移动到某个元素上 4.5 onmouseout 鼠标从某元素移开 5.键盘事

div如何添加onfocus和onblur事件

在下月亮有何贵干

11-12

2040

正文有时候自己DIY一些组件的时候，容器一般就用div。而div默认是没有聚焦的，没有聚焦onfocus和失焦onblur事件。不过只要加上tabindex属性就好啦，值可以随便些。 <div id="box" tabindex="111"></div> 有时候会出现一些自己预料外的聚焦外边框样式，可以通过ouline去掉 #box { outline: 0; } ...

div绑定onblur事件

yanergo的博客

12-08

2591

onblur失去焦点事件只能在input、a、button等元素上绑定，在某些情况下无法使用这些标签，需要给div元素绑定onblur事件。这时候可以给div绑定tabIndex属性： <div tabindex="0" onblur="functionA"></div> PS：tabIndex属性应该绑定number，根据w3c的解释，tabIndex是tab 键用于导航时规定元素的 tab 键控制次序（1 是第一个）。 ...

css3失去焦点伪类_CSS：伪类内的焦点

09-15

6800

css3失去焦点伪类介绍 (Introduction) Selecting a parent element has long been impossible to do using just CSS, but a pseudo-class, :focus-within, changes that story somewhat. It allows to style an element whe...

文本框在获得和失去焦点时切换文本框样式

wockky的博客

03-27

668

图1为文本框未被选中时的效果,图2为文本框被选中的效果,下面介绍方法(核心代码为第3步的script代码) 1.首先是文本框(html代码) <div class="ct_right_header"> <div id="search" class="search"> <input id="search_1" class="search...

jquery文本框获得和失去焦点改变样式

书山有路，学海无涯

02-18

4004

input:focus,textarea:focus{ border:1px solid #f00; background:#fcc; } .focus{ border:1px solid #f00; background:#fcc; } $(function(){ $(":input").focus(function(

JavaScript如何获取和失去焦点

qq_45750154的博客

07-20

1万+

本篇文章给大家介绍一下JavaScript获取焦点和失去焦点的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。焦点处理焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。获取焦点：focus 当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。‘ 示例：在页

搜索文本框

Valentine_T的博客

02-06

437

设置搜索文本框的样式如下图所示为搜索文本框的默认样式，当文本框获得焦点时，清空文本框，并且让字体变为黑色；当文本框失去焦点时，如果文本框里的内容为空，则还原文本框里的文字，并且让字体颜色变为灰色完成以上要求，我新掌握了2个事件： onblur 事件会在对象失去焦点时发生 onfocus 事件在对象获得焦点时发生代码如下：在这里插入代码片 ...

Jquery文本框失去和获取焦点变色

01-10

5224

body { font: normal 12px/17px Arial; } div { padding: 2px; } input, textarea { width: 12em;

jQuery的单行文本框操作

x1397548794的博客

03-13

700

我们可以对文本框进行我们需要的操作，这次我们讲解通过获取和失去焦点来改变样式。我们现在先来解释下焦点，焦点是在页面上屏幕中闪动的的小竖线，鼠标点击可获得光标，Tab键可按照设置的Tabindex切换焦点。我们在输入密码或者数据是光标点一下，就获取了焦点鼠标了离开时就失去了焦点。我们先创建一个表单，HTML代码如下： <form actio...

使用Axure RP原型设计实践08,制作圆角文本框

weixin_33895604的博客

01-08

1389

本篇体验做一个简单圆角文本框，做到3个效果： 1、初始状态，圆角文本框有淡淡的背景色，边框的颜色为浅灰色2、点击圆角文本框，让其获取焦点，边框变成蓝色，背景色变成白色3、圆角文本框失去焦点，边框变成红色，背景色变成白色从组成上分析，圆角文本框实际是由里层的Text Field和外层的Rectangle组成。对于第一个状态，给Rectangle设置背景色和边框色，并且让Text ...

文本框中的事件应用(纯js验证邮箱)

yilingpupu的博客

04-16

549

文本框中的事件应用 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <sc...

JavaScript_事件分类之焦点事件与鼠标事件

weixin_44975452的博客

10-13

587

JavaScript事件分类: 页面事件鼠标事件焦点事件键盘事件表单事件焦点事件：多用于表单验证功能。例：文本框获聚焦点改变文本框样式，文本框失去焦点时验证文本框内输入内容常用焦点事件：事件名称事件触发时机 focus 当获得焦点时触发 blur 当失去焦点时触发实例操作——验证用户名和密码是否为空 <!DOCTYP...

javascript当文本框获得焦点设置边框

weixin_34051201的博客

12-31

486

javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式，本来是一个非常简单的问题，但是有可能前台美工人员对javascript并不是太了解，所以还是通过一个简单的实例介绍一下，以便需要的朋友进行扩展。代码如下:<!DOCTYPE html> <html> <head> <meta charset=" utf...

文本框提示样式，鼠标点击获得焦点时提示内容消失

ttt015651的专栏

10-15

1178

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb

jQuery 文本框文字提示效果