HTML DOM focus()和blur()方法 输入框鼠标指过自动消失鼠标离开显示 js

最新推荐文章于 2021-10-21 11:08:34 发布
最新推荐文章于 2021-10-21 11:08:34 发布
阅读量1.1w 收藏 4
点赞数
分类专栏： DIV+CSS+HTML 文章标签： html function xhtml button input class

定义和用法

focus() 方法用于在密码域上设置焦点。

语法

passwordObject.focus()

实例

下面的例子可设置或移开密码域上的焦点：

<html>
<head>
<script type="text/javascript">
function setFocus()
  {
  document.getElementById('password1').focus()
  }
function loseFocus()
  {
  document.getElementById('password1').blur()
  }
</script>
</head>
<body>

<form>
<input type="password" id="password1" value="thgrt456" />
<input type="button" οnclick="setFocus()" value="Set focus" />
<input type="button" οnclick="loseFocus()" value="Lose focus" />
</form>

</body>
</html>
实例2：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>

<script type="text/javascript">
       function chg(){
       document.getElementById("setfocus").value="";
       }
       function newChg(){
       document.getElementById("setfocus").value="请输入关键字";
       }
</script>

</head>

<body>
<input type="text" name="name" size="15" class="input" id="setfocus" value="请输入关键字" οnfοcus="chg()" οnblur="newChg()">

</body>
</html>

实例3

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>

<script type="text/javascript">
function $(ID) {return document.getElementById(ID);}
function chg(){
$("setfocus").value="";
}
function newChg(){
    if($("setfocus").value==""){
        $("setfocus").value="请输入关键字";
        }
    else{return $("setfocus").value }
}
</script>

</head>

<body>
<input type="text" name="name" size="15" class="input" id="setfocus" value="请输入关键字" οnfοcus="chg()" οnblur="newChg()">

</body>
</html>
楚小狂
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html文本框鼠标离开事件,html鼠标事件_文本框事件
weixin_33748493的博客
06-03 1761
该楼层疑似违规已被系统折叠隐藏此楼查看此楼今天57号网络技术分享给大家介绍html鼠标事件，就是当前文本框获得焦点时，里面的原有文本清零。首先我们来看一看源代码运行后的效果图片：你也可以【点击预览】，看到我们真实的效果。下面是源代码，喜欢就支持一下吧：/p>Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
前端点击其他输入框的时候，对当上个输入框进行判断（鼠标移出输入框事件，和鼠标点击其他输入框触发事件）
最新发布
weixin_53607413的博客
11-01 898
一个很常见的问题，添加某一条信息的时候，例如输入账号之后，在输入密码的时候，立即对账号的输入框进行一个简单的验证。
Jquery.on() 与 .blur() 详解
tian_xiao_tiger的博客
12-12 7071
on()   函数用于为指定元素的一个或多个事件绑定事件处理函数。 blur() 函数用于为每个匹配元素的blur事件绑定处理函数。       该函数也可用于触发blur事件。blur事件就是获得失去鼠标光标焦点事件。       还可以额外传递给事件处理函数一些数据。       另外，同一元素多次调用该函数，从而绑定多个事件处理函数。       触发blur事件时，jQu
input 做省市联动时总是弹出默认的键盘处理方法--document.activeElement.blur()
梧桐落叶~~
07-04 4199
直接给input绑定事件执行document.activeElement.blur()即可 <input type="text" placeholder="" v-model="" @click="stopdefault"/> methods:{ stopdefault(){ document.activeElement.blur();//屏蔽默认键盘弹出； }, }
解决表格中动态el-input（focus、blur异常）（涉及vue、document以及原生div属性操作）
weixin_46037781的博客
09-29 3138
一、异常来源 最初，本来需求，就简单的在表格的输入框失去聚焦的时候（或值改变的时候）进行规范校验，然后根据校验对其进行聚焦focus()事件（并给出message提示）。 结果却发现如此坑爹之处: 二、解决思路与步骤 用vue获取ref,进行focus，没啥用 用document,因为是table组件中的input，使它，聚焦的时候是整列，使其在tab（键盘tab）操作时，会去下一行同列 给每个el-input动态设置id，然鹅，发现聚焦实在element封装的最外层div元素上 然后
基于jQuery的输入框无值自动显示指定数据的实现代码
10-28
这个实现方式简单高效，通过jQuery的事件监听和DOM操作，实现了输入框无值时自动显示指定数据的效果。用户在输入框内输入内容后，提示文本会消失，而当输入框为空或仅包含空白字符时，提示文本又会自动显示。这种...
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
10-27
这段代码在页面加载完成后（`$(function(){...})`，即DOM就绪事件）执行，选择所有`.input_test`类的输入框，并为它们绑定`focus`和`blur`事件。当输入框获得焦点且其值等于默认值时，清除输入框的值；当输入框失去...
用Html+Js实现的“自动补全”功能 (2).docx
11-27
本示例主要讲解如何使用HTML和JavaScript来实现类似百度搜索框的自动补全功能。 首先，我们要理解自动补全功能的基本需求： 1. 当用户在输入框中输入字符时，系统应能自动匹配与输入相关的数据，并在界面上展示。 2...
使用jquery给input和textarea设定ie中的focus
10-30
如果是，它会监听所有指定类型的input和textarea元素的`focus`和`blur`事件。当元素获得焦点时，其背景色更改为`#FFFFF7`；失去焦点时，背景色恢复为白色。这样，即使在不支持`:focus`伪类的IE中，也能实现类似的...
用Html+Js实现的“自动补全”功能.docx
11-27
本篇将详细介绍如何使用HTML和JavaScript实现这一功能。 ### HTML 结构分析 自动补全的基本结构通常包含一个输入框和一个用于显示匹配结果的列表。在示例中，选择了一个`<div>`包裹输入框和列表，并使用`<input>`...
html文本框鼠标离开事件,鼠标点击，经过，鼠标离开事件完整html实例代码（图）...
weixin_34223354的博客
06-03 1026
本文讲解鼠标点击，经过，鼠标离开事件的htm实现方法，以下是完整html实例代码Documentvar a,b,c;a=100;b=200;c=a;a=b;b=c;console.log(a,b);alert(a+" "+b);window.onload=function(){var sj;sj=document.getElementById("a");sj.style.color="pink";...
html判断光标离开文本框,[转]js实现光标聚焦到文本或者文本框的最后
weixin_36076701的博客
06-05 1083
js实现光标聚焦到文本框最后,focus版本js实现光标聚焦到文本框最后,focus版本 document.getElementByIdx_x("ifocus").focus();可以看下不同浏览器的显示效果正确的js实现聚焦到文本框最后的方法js实现光标聚焦到文本框最后function myFocus(sel, start, end) {if (sel.setSelectionRange) {s...
html输入框光标离开事件,input使用v-model时，input从中间删除时光标跳到最后
weixin_39850920的博客
06-04 1274
目前我这边的解决方法是使用string-replace-loader将vendor.js里的getVmData方法替换成:function getVmData (vm) {var res = getVmData_old( vm );if ( !vm.$dataPropLocked ) {console.log("no dplock!");return res;}var locked = vm.$d...
html中用标签控制输入框输入法,input控件中输入控制的几种方法
weixin_42228796的博客
06-04 947
有关禁止打开输入法：ime-mode:disable这个属性在最新的Chrome下是无效的。另外onchange事件并不能捕捉input控件内容的实时变化，也没办法通过重写onpaste事件禁止粘贴。最后尝试了oninput事件，onchange事件和onkeyup事件共同控制输入框的值，基本上达到了预想的效果，意外的是oninput事件几乎可以达到屏蔽输入法的效果(可以打开输入法，但无法看到选择...
jQuerry的鼠标聚焦、失焦、悬停、悬停又失焦、双击鼠标变色事件
qq_44867886的博客
10-21 1317
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".hide").click(function(){ $(".ex").hide("slow"); ...
php hover,CSS3实现hover离开时平滑过渡的实例详解
weixin_39639622的博客
03-25 561
本篇文章主要介绍了CSS3实现伪类hover离开时平滑过渡效果示例，具有一定的参考价值，有兴趣的可以了解一下由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。离开时效果生硬p{width: 100p...
js鼠标悬停在a标签显示div,移走鼠标div消失，鼠标悬停在div上时div不消失
热门推荐
秦兽兽的博客
10-12 2万+
把鼠标悬浮在标签a标签上时，出现或隐藏div，当div出现之后，将鼠标移到div上的时候，div不消失鼠标还可以继续操作其他功能的代码如下： &lt;a id="login-btn"&gt;按钮&lt;/a&gt; &lt;div id="login-box" style="display:none;"&gt;默认隐藏的div&lt;/div&gt; &lt;script&
js 写一个关闭安卓虚拟键盘的方法
08-07
### 回答1： 可以使用以下代码来关闭安卓虚拟键盘： ```javascript function hideAndroidKeyboard() { var input = document.createElement("input"); input.setAttribute("type", "text"); document.body.appendChild(input); input.onfocus = function() { input.blur(); document.body.removeChild(input); } input.focus(); } ``` 这个方法动态创建一个输入框，然后让它获取焦点，这样就会弹出安卓虚拟键盘。接着，立即将焦点转移到另一个元素上，这样虚拟键盘就会关闭了。最后，将创建的输入框从 DOM 中移除。 ### 回答2： 在 JavaScript 中关闭安卓虚拟键盘的方法有多种途径，以下是一种常见的实现方法： 首先，我们需要一个触发关闭虚拟键盘的事件，通常是用户点击一个按钮或者输入框失去焦点。在该事件的处理函数中，我们可以使用 `document.activeElement` 获取当前获得焦点的元素，然后使用 `blur()` 方法将焦点从该元素上移除，从而关闭虚拟键盘。 下面是代码示例： ```javascript function closeVirtualKeyboard() { var activeElement = document.activeElement; if (activeElement) { activeElement.blur(); } } ``` 在这个示例中，`closeVirtualKeyboard` 函数会检查当前获得焦点的元素，并使用 `blur()` 方法将焦点移除。 你可以在需要关闭虚拟键盘的地方进行调用，比如一个按钮的点击事件处理函数中： ```javascript document.querySelector('.close-keyboard-btn').addEventListener('click', closeVirtualKeyboard); ``` 在这个示例中，我们假设有一个具有 `close-keyboard-btn` 类名的按钮，当用户点击该按钮时，会调用 `closeVirtualKeyboard` 函数来关闭虚拟键盘。 需要注意的是，由于 JavaScript 的安全限制，无法直接通过代码来主动触发虚拟键盘的打开或关闭，因此以上的方法只能用于失去焦点触发关闭虚拟键盘。具体实现方式可能还需要根据你的应用场景进行调整。 ### 回答3： 在JavaScript中，可以使用`document.activeElement.blur()`方法来关闭安卓虚拟键盘。 虚拟键盘通常是由用户在输入框或文本区域中进行输入时自动弹出的，因此我们可以通过移除焦点来关闭虚拟键盘。`document.activeElement`返回当前活动的元素，然后使用`blur()`方法将焦点从该元素中移除，这将导致虚拟键盘被关闭。 以下是一个示例代码，演示如何使用JavaScript关闭安卓虚拟键盘： ```javascript function closeAndroidKeyboard() { document.activeElement.blur(); } ``` 当调用`closeAndroidKeyboard()`函数时，将会关闭当前处于焦点状态的输入框或文本区域的安卓虚拟键盘。 需要注意的是，这种方法只适用于移除当前的焦点，如果有多个输入框或文本区域具有焦点，需要额外的逻辑来处理。另外，该方法仅适用于安卓设备，对于其他平台可能不起作用。如果需要在不同平台上关闭虚拟键盘，可能会需要进行更多的平台特定的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值