input获取焦点原生js,文本框(input)获取焦点(onfocus)时样式改变的实现方法

最新推荐文章于 2021-12-23 21:25:09 发布

转载最新推荐文章于 2021-12-23 21:25:09 发布 · 1.7k 阅读

文章标签：

#input获取焦点原生js

本文介绍如何利用JavaScript为文本框(input)实现获取焦点和鼠标悬停时的样式变化，通过简单示例演示设置焦点的方法，并探讨其背后的原理，适用于扩展其他交互效果。

许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单，我们只需要获取页面上的文本框，加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式，明白原理后，实现其他效果就很简单了。

设置某一个文本框为焦点：

document.getElementById(“username”).focus();//设置用户名的文本框为焦点。

Javascript:

程序代码

HTML:

程序代码

????文本框：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39883670

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法

10-24

接下来，我们将使用JavaScript来实现文本框在获得焦点时背景图片消失，失去焦点时背景图片出现的功能。具体实现代码如下： ```javascript <script type="text/javascript" language="javascript"> (function(){ ...

文本框获得焦点和失去焦点的判断代码

12-09

本文将详细讲解如何利用JavaScript和jQuery来处理文本框的焦点获取与失去事件。首先，我们来看JavaScript原生的事件绑定。在HTML中，可以直接在`<input>`标签上使用事件处理函数，比如： ```html <input name=”...

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

jquery学习（3）文本框获取焦点之后变换样式

weixin_30933531的博客

04-21

101

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...

input框获取焦点时，边框样式修改等

qq_40798486的博客

11-26

1万+

在css样式中，写入 input:focus {//获取焦点 outline: 1px solid #51c9ff;//边框不用border，用outline background: rgba(3, 16, 28, 0);//背景色 } 如果获取焦点需要，修改输入value的颜色。直接在input，color中设置就可以 ...

input获取焦点原生js_原生js的input事件

weixin_39919089的博客

02-16

5892

1.onfocus 当input 获取到焦点时触发2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。4.onkeydown 按下按键时的事件触发，5.onkeyup 当按键抬起的时候触发的事件，在该...

html input onfocus

weixin_30456039的博客

03-11

718

<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';"> html中input文本框，初始里边有文字提示，当点击时，文字消失,onfocus事件检查当前值,如果是默认值,就将value属性值置空this.value=''; 转载于:https://...

vue中使原生input自动聚焦

zhongqing1995的博客

12-02

1153

html代码 <input id="inputValId" ref="myInput" @blur="blurText" /> js代码 // 100毫秒延迟解决循环出来的后续输入框不自动获取焦点的bug setTimeout(() => { this.$refs.myInput.focus();//延时100毫秒调用focus() console.log("聚焦") }, 100); // this.

javascript 文本框水印/占位符(watermark/placeholder)实现方法

10-28

JavaScript 实现文本框水印（Watermark）/占位符（Placeholder）的兼容性处理在HTML5中，为了提供更好的用户体验，表单元素（如text、password、search、url、telephone、email）引入了`placeholder`属性。该属性...

JavaScript实现焦点进入文本框内关闭输入法的核心代码

10-19

在讨论JavaScript实现焦点进入文本框内关闭输入法的核心代码时，我们首先要了解的是输入法编辑器（Input Method Editor，IME）的概念。IME是一种软件组件，它使得用户可以通过键盘输入非键盘原生的语言字符，例如...

html中实现文本框出现提示功能的多种方法.doc

最新发布

12-08

在原生的HTML输入框中，通过`class`属性指定CSS样式，并在JavaScript中控制输入框获得焦点时清空提示内容，在失去焦点时若内容为空则显示提示内容。以下是具体的代码实现： ```css .in_search { border: 1px none...

input onfocus

power8988的博客

07-05

1201

有个小伙伴问，如何修改input输入时的背景颜色。

原生标签的focus

luxiaopengyou的博客

06-04

421

使用与不使用setTimeout的代码如下： get('makeinput').onmousedown = function() { var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('value', 'test1'); get('

input获取焦点，改变父元素

weixin_60684791的博客

12-23

3209

很????的一个问题只能使用css实现，input获取焦点，改变父元素的颜色；试了很久都是只能改变input的背景颜色，百度调研了很久，都是说纯CSS实现不了，找到一篇长篇大论的文章，在我以为我快要接近答案的时候，末尾来了一句纯CSS实现不了，用JS实现去了。心态炸了！！！能用JS，鬼用css啊。最后还是在MDN找见了解决方法，吹一波，????????。发泄完了，进入正题： :focus-within :focus-within是一个CSS伪类，表示一个元素获得焦点，或该元素的后代元素获得焦

JS JQuery中实现点击当前标签改变样式以及同时改变后几个标签的样式

weianl的博客

08-19

4923

我在移动端的开发中遇到了如下粉红色选择第一个时间点时，后两个时间点的样式也改变了 JS（注意这些代码是放到jQuery方法里的）首先我把列表的数据放到了js数组 var afternoonData = ["13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"] ...

【基础】input标签输入框内的输入事件详细分析

青年码农

12-08

988

今天项目上用到了oninput事件，顺便就记录下表单常用事件。1.onblur：元素失去焦点时触发Onblur经常用于表单验证，所有主要浏览器都支持 onblur 事件<inputtype="text"onblur="myFunction()">支持该事件的 HTML 标签：<a>,<acronym>,<address&...

JS 之 onfocus事件和onblur事件

等一个故事

07-30

1万+

在我们平时开发网站中，我们一定会经常遇到onfocus和onblur这两个事件，今天就给大家简单介绍一下这两个事件： onfocus 事件在对象获得焦点时发生。 function setStyle(x) { document.getElementById(x).style.background="yellow" } 请输入: 当文本框得到焦点的时候，触发

input输入效果控制onfocus和onblur事件

input获取焦点 原生js,文本框(input)获取焦点(onfocus)时样式改变的实现方法

input获取焦点原生js,文本框(input)获取焦点(onfocus)时样式改变的实现方法