为什么事件模糊不适用于函数名称模糊？
[英]Why the event blur is not working with the function name blur?
问题描述
When I am trying to add event (particular "blur") to HTML with the same function name blur why it is not working but when I am taking another function name like blurf or abc
当我尝试将事件（特别是“blur”）添加到具有相同函数名称的 HTML 时，为什么它不起作用但当我使用另一个函数名称（如 blurf 或 abc）时
function abc(element){ element.style.background="lime" } function blur(element){ element.style.background="" }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title></title> </head> <body> <form action=""> <label for="">Name</label> <input type="text" id="fname" onfocus="abc(this)" onblur="blur(this)"> <br><br> <label for="">class</label> <input type="text" onfocus="abc(this)" onblur="blur(this)"> <br><br> <label for="">Country</label> <select name="" id=""> <option value="">Pakistan</option> <option value="">India</option> <option value="">America</option> <option value="">China</option> </select> </form> </body> </html>
or any other name it starts working.或它开始工作的任何其他名称。 can anybody tell me why?谁能告诉我为什么？
2 个解决方案
解决方案1
1 2020-11-03 17:44:02
There is a much elegant solution for it - instead of using javascript, use css pseudo-class focus :有一个非常优雅的解决方案 - 而不是使用 javascript，使用 css 伪类焦点：
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus.
In your case:在你的情况下：
.lime-focused-input:focus { background:lime; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title></title> </head> <body> <form action=""> <label for="">Name</label> <input type="text" id="fname" class="lime-focused-input"> <br><br> <label for="">class</label> <input type="text" class="lime-focused-input"> <br><br> <label for="">Country</label> <select name="" id=""> <option value="">Pakistan</option> <option value="">India</option> <option value="">America</option> <option value="">China</option> </select> </form> </body> </html>
解决方案2
0 已采纳 2020-11-03 15:40:59
I guess if you are trying to change the background try with transparent and also, don't use blur , it's a conflicting keyword (see below for reason):我想如果您尝试更改background尝试使用 transparent 并且不要使用blur ，这是一个相互冲突的关键字（原因见下文）：
function abc(element) { element.style.background = "lime"; } function aaa(element) { element.style.backgroundColor = "transparent"; }
<form action=""> <label for="">Name</label> <input type="text" id="fname" onfocus="abc(this)" onblur="aaa(this)"> <br><br> <label for="">class</label> <input type="text" onfocus="abc(this)" onblur="aaa(this)"> <br><br> <label for="">Country</label> <select name="" id=""> <option value="">Pakistan</option> <option value="">India</option> <option value="">America</option> <option value="">China</option> </select> </form>
By default, the scope is window scope and window.blur() or blur() is an event handler of window object and that cannot be overridden.默认情况下，范围是window范围， window.blur()或blur()是window对象的事件处理程序，不能被覆盖。
So you cannot override any of these window related properties.因此您不能覆盖任何这些与window相关的属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.