input color 类型使用记录

公司提了做一个调色板更换背景的需求,然后就找到了input 

将type设置为color就可以正常调出颜色选择器了

但是需要注意的是onchange事件,网上很多教程和博主都写的是直接绑定事件

document.qs('#onchange').onchange(()=>{

alert(this.value)

})

然后这样是拿不到的,要在中间加一次点击事件才可以

document.qs('#onchange').onchange(()=>{

document.qs('#onchange').click()

alert(this.value)

})

这样就可以正确获取到value颜色值了,再次记录一下。太多人乱转教程,自己不验证了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您的问题已经记录下来了。以下是针对每个问题的解答: 1. 可以使用 jQuery 的 `focus()` 和 `blur()` 方法来实现输入框获得和失去焦点时的事件处理函数。例如在 `focus()` 中设置输入框的背景色为红色,在 `blur()` 中设置背景色为白色。 示例代码: ```javascript $(document).ready(function() { // 输入框获取焦点事件处理函数 $("input").focus(function() { $(this).css("background-color", "red"); }); // 输入框失去焦点事件处理函数 $("input").blur(function() { $(this).css("background-color", "white"); }); }); ``` 2. 可以在密码输入框的 `blur()` 事件处理函数中使用正则表达式来判断密码是否符合要求,如果不符合要求,则在输入框后面显示提示信息。 示例代码: ```javascript $(document).ready(function() { // 密码输入框失去焦点事件处理函数 $("#password").blur(function() { var password = $(this).val(); // 使用正则表达式判断密码是否符合要求 if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{6,10}$/.test(password)) { $(this).after("<span>Password must contain at least 1 lowercase letter, 1 uppercase letter, 1 digit, and be 6-10 characters long.</span>"); } }); }); ``` 3. 可以在验证密码一致性的按钮的点击事件处理函数中,获取两个密码输入框的值进行比较,如果一致则显示验证通过的警告框,否则显示验证不通过的警告框。 示例代码: ```javascript $(document).ready(function() { // 验证密码一致性的按钮点击事件处理函数 $("#verify-btn").click(function() { var password1 = $("#password1").val(); var password2 = $("#password2").val(); if (password1 === password2) { alert("Passwords match!"); } else { alert("Passwords do not match!"); } }); }); ``` 4. 可以使用 jQuery 的 `prop()` 方法来设置按钮的 `disabled` 属性,从而禁用或解除禁用按钮。在验证密码不一致时,可以记录错误次数,超过三次后禁用按钮,并在三分钟后解除禁用。 示例代码: ```javascript $(document).ready(function() { var errorCount = 0; var disableTime = 3 * 60 * 1000; // 3 minutes in milliseconds var disableTimeout; // 验证密码一致性的按钮点击事件处理函数 $("#verify-btn").click(function() { var password1 = $("#password1").val(); var password2 = $("#password2").val(); if (password1 === password2) { alert("Passwords match!"); } else { alert("Passwords do not match!"); errorCount++; if (errorCount >= 3) { $("#verify-btn").prop("disabled", true); disableTimeout = setTimeout(function() { $("#verify-btn").prop("disabled", false); errorCount = 0; }, disableTime); } } }); }); ``` 5. 以上代码已经使用了 jQuery 完成,包括选择器、事件处理函数、属性操作等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值