手机点击Input外无法onBlur

本文介绍了一种解决iOS设备上HTML输入框点击外部区域无法触发失焦事件的方法,通过在外层容器添加onClick事件监听,实现了软键盘的自动收起,提升了用户体验。

突然发现html自带的 Input 在 Ios手机 和 iPad 上点击框外不会 onblur,软键盘不能回弹关闭,弄了好久,终于发现一个办法(无奈之举):
在包裹着 input 外的最外层容器上添加 onClick 事件。

 const onInputBlur = e => {
    if (e.target.tagName !== 'INPUT') {
      onBlur()
    }
  };
  
<div onClick={onInputBlur}></div>

这样就可以啦!

<div class="submit "><form action="signup.php" method="POST" class="Form1" id="Form1" onsubmit="return check()"> <span>账号&nbsp:&nbsp</span><input class="input1" type="username" onblur="signupusername()" required eholder="请输入账号名"><p class="text1">账号格式有误</p> <p class="text2"></p> <span>密码&nbsp:&nbsp</span><input> class="input2" type="password" name="signup_passWord"onblur="signuppassword()" required placeholder="请输入密码"><p class="text">密码必须由6-16位数字加字母组成</p> <span>确认&nbsp:&nbsp</span><input class="input3" type="password" name="signup_passWord2" onblur="signuppassword2()" required placeholder="请确认密码"> <p class="text3">前后密码不一致</p> <span>手机&nbsp:&nbsp</span><input class="input4" type="phone" name="signup_phone"onblur="signupphone()" required placeholder="请输入手机"><p class="text4">手机号码格式有误</p> <span>邮箱&nbsp:&nbsp</span><input class="input5" type="email" name="signup_email" onblur="signupemail()" required placeholder="请输入邮箱"><p class="text5">邮箱格式有误</p> <p class="yz"> <span>验证码&nbsp:</span> <input type="text" id="text" class="yz_text" required placeholder="请输入验证码">input type="button" id="code" onclick="Code()" title='点击更换验证码'> </p>input class="sub1" type="submit" value="立即注册"></form> </div>  <div class="submit action"><form action="login.php" method="POST"> <span>账号&nbsp:&nbsp</span><input class="input6" type="username" name="login_userName" requiredplaceholder="请输入手机号"> <span>密码&nbsp:&nbsp</span><input class="input7" type="password" name="login_passWord" required placeholder="请输入密码"><input class="sub2" type="submit" value="立即登录"></form></div></div> </div> </div>根据代码写一个jQuery交互数据,使用到ajax
05-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hope Fancy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值