When a user registers, they will click on a label to change the verification code. When clicked, there is a shadow part on the a label. But this is intolerable for students who like aesthetics! What is the reason for this? It turns out that the href attribute of the a tag is to blame. 1. Just a tag There are two solutions I know of. First: prescribe the right medicine for the disease. Since it is caused by href. Then remove the href attribute When we use href=javascript:RefreshCode(); we just update the verification code. No page jump. Copy code The code is as follows:<ahref="javascript:RefreshCode();"class="yellow">Can't see clearly? Change picture</a> So you can remove href, add an onclick event to the a tag, and call the update verification code function. Copy code The code is as follows:<aonclick="RefreshCode()"class="yellow">Can't see clearly? Change picture</a> Second: Take a step back. Seek common ground while reserving differences. Since you want to use the href attribute. All right. Then I'll add another event for you: onfocus Just modify it and you can perfectly remove it by adding onfocus="this.blur()" to the a tag. certainly. If you want the a tag to not be underlined. Then: style="text-decoration: none" Copy code The code is as follows:<a href="javascript:RefreshCode();"class="yellow"onfocus="this.blur()">Can't see clearly? Change picture</a> Effect after modification In FF and other browsers, it is relatively easy. Just define the style outline:none for the tag a, that is: Copy code The code is as follows:a{ outline:none; } Of course this is just removing a single one. If there are multiple a tags on the page, shouldn't we add onfocus events one by one? Of course not. We can do this when the page loads. Get all the a tags on the page through: window.document.links.length (window can be omitted here). Then iterate over the registered events. Copy code The code is as follows:<scripttype="text/javascript"> window.onload = function(){ for(var i=0; i<document.links.length; i++) document.links[i].onfocus=function(){this.blur()} } </script> 2. Add a background image to the button: Another if you add a background image to the button. There will be shadows. The same approach can also be used to achieve Copy code The code is as follows:<asp:Button ID="imgBtnReg" runat="server"onfocus="this.blur()" OnClientClick="return chk_reg();"OnClick="imgBtnReg_Click" Text="Confirm submission"/> <input type="submit"id="btnReg" value="Registration" name="regist" onfocus="this.blur()"onclick="return checkAll()" style="background-image:url('image/btn.jpg')"/> Effect after modification: 3. If you add an a tag to img, then add onfocus to the a tag and set the border attribute of img: border=0 Copy code The code is as follows:<a href="#none" onfocus="this.blur()"> <img style="border:0px"> </a> If your page has both a tag. There is a button again. You can wrap it into a function Copy code The code is as follows:function fHideFocus(tName){ aTag=document.getElementsByTagName_r(tName); for(i=0;i<aTag.length;i++)aTag.hideFocus=true; //for(i=0;i<aTag.length;i++)aTag.onfocus=function(){this.blur();}; } Currently, a hidefocus attribute is added, and its value is a Boolean value, such as hideFocus=true. You can also omit the assignment and directly hideFocus. If the code does not have hideFocus, then when the mouse clicks the hyperlink, a dotted box will appear outside, indicating focus. If hideFocus is used, there will be no dotted frame. The commented-out sentence is to add onfucus = this.blur(); which has the same effect. Extensions: A. How to remove the dotted lines of links within a map area? Copy code The code is as follows:<a href="http://blog.sina.com.cn/s/articlelist_3015911503_0_1.html"onfocus="this.blur()"> <img style="border:0px"> </a> Among them, onfocus is used to set the mouse focus event. This can be used or not. However, in order to allow more browsers to recognize it, it is recommended to use border=0. This is the key to removing the dotted frame (on the Internet, most people use onfocus="this.blur()" to remove the dotted frame, but sometimes, this sentence alone cannot remove it) For the experts, the knowledge points are already very outdated. But for friends who have just come into contact with it, it is a timely relief, and I just happened to encounter it today. So it is recorded here. Knowledge must be accumulated bit by bit. |
<<: Solve the problem of 8 hours difference between docker container and host machine
>>: Detailed introduction to CSS font, text, and list properties
When deploying uwsgi+nginx proxy Django, access u...
Using mask layers in web pages can prevent repeat...
Cascading and Cascading Levels HTML elements are ...
Problem Description Recently, when I was building...
Recently, I happened to be in touch with the vue+...
Image Accelerator Sometimes it is difficult to pu...
1. Set the list symbol list-style-type: attribute...
The latest download and installation tutorial of ...
Table of contents What is Proxy Mode? Introducing...
1) Enter the folder path where the jdk file is st...
There are many loopholes in the simple seamless s...
Find the problem Recently, I found a problem at w...
A dynamic clock demo based on Canvas is provided ...
1. Download the RPM package corresponding to Linu...
question Running gdb in docker, hitting a breakpo...