layui input监听 过去焦点时可点击 输入框内图标 否则不可点击
时间: 2023-11-18 14:06:16 浏览: 51
你可以使用 layui 的 form 模块中的 on 和 off 方法来实现监听输入框的焦点变化。
首先,在输入框后面添加一个图标,例如:
```html
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
<i class="layui-icon layui-icon-username" id="icon"></i>
</div>
```
然后,在 JavaScript 中添加监听代码:
```javascript
layui.use('form', function(){
var form = layui.form;
// 监听输入框的焦点变化
$('input[name="username"]').on('focus', function() {
$('#icon').addClass('layui-icon-click');
}).on('blur', function() {
$('#icon').removeClass('layui-icon-click');
});
// 点击图标的事件
$('#icon').on('click', function() {
if ($('#icon').hasClass('layui-icon-click')) {
// 可以执行点击事件的代码
alert('图标被点击了!');
}
});
});
```
上面的代码中,我们使用了 jQuery 的 on 和 off 方法来监听输入框的焦点变化。当输入框获得焦点时,我们给图标添加一个类名,使其变为可点击状态;当输入框失去焦点时,我们移除这个类名,使其变为不可点击状态。
在图标的点击事件中,我们判断是否有这个可点击的类名,如果有,则执行点击事件的代码。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)