`
gaoyu
  • 浏览: 274601 次
  • 来自: 云南大理
社区版块
存档分类
最新评论

去除链接虚线框

阅读更多
<input name="result" id="result" type="text" onFocus="this.blur();" size="20" value="">
是一个输入框,用户输入文本的框就是类似于百度的搜索框,大小是20,value=""说明初始为空
onfocuse="this.blur()"
onfocuse是聚焦的意思,当你把光标放在文本框上输入的时候,就是聚焦,但这里添加了"this.blur()",blur的作用就是去除聚焦,也就是你不能把光标放在这个文本框上,换句话说就是你不能输入文本了
----------
整个代码构成了”不能输入任何文本的文本框“



网页制作实用小技巧:去除链接虚线框 (1) 局部控制

<a href="link1.htm" onfocus="this.blur()">link1</a>

<a href="link1.htm" onfocus="this.close()">link1</a>

<a href="link1.htm" hidefocus="true">link1</a>

<a href="link1.htm" hidefocus="hidefocus">link1</a>

全局控制

CSS技巧">CSS实现

a{blr:e­XPression(this.onFocus=this.close());} /* 只支持IE,过多使用效率低 */

a{blr:e­xpression(this.onFocus=this.blur());} /* 只支持IE,过多使用效率低 */

a:focus { -moz-outline-style: none; } /* IE不支持 */

HTC实现 IE支持,页面载完才有效果

把下面这段代码存为.htc为扩展名的文件

<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="Javascript">
function hscfsy(){
this.blur();
}
</script>
调用 a {behavior:url(htc文件所在路径地址)}

JS遍历实现

window.onload=function()
{
for(var ii=0; ii<document.links.length; ii++)
document.links$[$ii$]$.onfocus=function(){this.blur()}
}

JS封装为函数

function fHideFocus(tName){
aTag=document.getElementsByTagName(tName);
for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;
//for(i=0;i<aTag.length;i++)aTag$[$i$]$.onfocus=function(){this.blur();};
}
当前是添加一个hidefocus的属性,注释掉的句子是添加onfUCus=this.blur();
然后调用fHideFocus("A"),即可把a的虚线框去掉
通过传递不同的参数,可以去掉更多的虚线框,比如"BUTTON"可以去掉button的
但要记住参数要用大写字母

A. map area内链接如何消除链接虚线?

这是一个观念上的错误,其实应该在所在map的图片上加以控制,而不是在area内,参考传统办法

B. 关于onFocus

<a href=“http://www.xgdown.com/“ onFocus="this.blur()">



网页制作实用小技巧:去除链接虚线框(2)

<Img Src="http://www.xgdown.com/upload/2006103152747393.JPG" Border=0>
</a>
onFocus 是设置鼠标焦点事件的东西,这个可以用,也可以不用,不过为了让更多的浏览器识别的话,建议采用Border=0 这个才是去除虚线框的关键所在(在网上看到有的人用onFocus="this.blur()"来消除虚线框,但在本地测试时,仅仅用这一句是不能消除的)


  • 大小: 397.3 KB
分享到:
评论

相关推荐

    虚线边框去除

    对于特定的HTML元素,如按钮或链接,你可以直接指定该元素的CSS类来去除虚线边框: ```css .no-border { border-style: none; } ``` 然后在HTML中将此类应用到相应元素上: ```html 点击我 ``` 3. **只...

    去掉超链接的虚线框

    当用户通过鼠标或触摸设备点击超链接时,大多数浏览器默认会在链接周围显示一个虚线框,这通常被称为“焦点轮廓”(focus outline)。这个设计的初衷是为了增强可访问性,帮助视觉障碍用户或使用键盘导航的用户更...

    如何去掉图片热点链接或超链接的虚线框?.rar

    这种效果在某些设计中可能并不符合视觉要求,因此,如何去掉图片热点链接或超链接的虚线框是网页开发者常遇到的问题。本教程将详细介绍如何通过CSS代码来解决这个问题。 首先,了解HTML中的`&lt;a&gt;`标签,它是用来创建...

    去掉点击链接时出现的虚线.rar

    标题“去掉点击链接时出现的虚线”所涉及的知识点,就是如何通过编程技术,特别是JavaScript,来消除这种链接的虚线边框。 在HTML中,`&lt;a&gt;`标签用于创建超链接,当用户鼠标悬浮或点击链接时,浏览器会根据其默认...

    去掉点击链接时出现的虚线框的几个方法

    总结以上方法,我们可以看到虽然去除链接虚线框的需求很常见,但是实现的方法各有优劣,需要根据目标浏览器和项目需求来选择最适合的方案。需要注意的是,移除虚线框可能会使得键盘导航变得更困难,因为视觉上不再有...

    CSS去掉A标签(链接)虚线框的方法

    至于IE浏览器,比较遗憾的是,目前还没有找到通过CSS去掉链接虚线框的完美解决方法。所以,只能使用IE特有的`hidefocus`属性来实现这一需求。 总结来说,去除非必要的焦点轮廓线,主要集中在移除`outline`属性,并...

    javascript经典特效---去掉图片链接周围虚线.rar

    这在某些设计风格中可能并不符合预期,因此我们需要找到方法来去掉这个虚线边框。本主题围绕“JavaScript经典特效——去掉图片链接周围虚线”展开,我们将探讨如何利用JavaScript来解决这个问题。 首先,我们需要...

    去掉a标签超链接的虚线框的方法

    去掉a标签超链接的虚线框的方法 在网页设计中,a标签超链接的虚线框是非常常见的,但有时我们需要去掉这种虚线框以提高用户体验。今天,我们将讨论如何去掉a标签超链接的虚线框。 一、使用outline属性 在Firefox中...

    去掉点击链接时周围的虚线框outline属性

    总结起来,去除链接点击时的虚线框,我们可以采用HTML的`hidefocus`属性(仅限IE),CSS的`:focus`伪类结合`outline`属性,或者使用JavaScript动态处理。选择哪种方法取决于兼容性需求、设计要求以及项目的技术栈。...

    css去掉链接虚框

    在网页设计中,当用户通过键盘导航(例如使用Tab键)或使用辅助技术(如屏幕阅读器)与页面交互时,浏览器默认会在可聚焦元素(如`&lt;a&gt;`标签、某些表单元素等)周围显示一个虚线边框,称为“焦点轮廓”或“虚框”。...

    IE4 IE5中点击一个图片链接(实际是链接获得焦点)或者文字连接的时候,周围就会出现一圈讨厌的虚线框,用这个插件可以去掉

    IE4 IE5中点击一个图片链接(实际是链接获得焦点)或者文字连接的时候,周围就会出现一圈讨厌的虚线框,用这个插件可以去掉

    使用JS CSS去除IE链接虚线框的三种方法

    这篇文章主要介绍了四种方法来去除IE链接上的这个虚线框,分别是使用JavaScript、CSS、HTML标签属性以及HTC(HTML Component)技术。 1. **JavaScript方法**: - **方法一**:利用`onfocus`事件。当链接获取焦点时...

    swfobject.js 去掉网页上Flash的虚线框.rar

    swfobject.Js 2.2 去除网页上Flash(SWF文件)的多余虚线框,细心的网友都会发现,以前在网页上显示Flash动画的地方,Flash的四周都会被一个虚线框包围着,当把鼠标放上的时候它就会出现,而且需要双击两次鼠标Flash...

    去除在FireFox中点击链接时,出现虚线边框的解决办法

    其中一个典型的例子就是在Firefox浏览器中,当用户点击一个链接(a标签)时,链接周围会显示一条虚线边框。这种现象在Internet Explorer和Google Chrome等其他浏览器中并不常见,因此可能给用户带来不一致的视觉体验...

    使用CSS去掉超链接的虚线边框的方法

    在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。  这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标...

    如何去掉图片热点链接或超链接的虚线框?特效代码

    这个虚线框在视觉上可能会影响到页面的整体美观,尤其是在追求精致设计的现代网页中,去掉这个边框显得尤为重要。本教程将详细介绍如何通过CSS代码来消除图片热点链接或超链接的虚线框。 首先,我们要理解什么是...

    去除链接元素的虚线框 兼容IE7、IE6、FF

    为了去除链接元素的虚线框,需要针对不同的浏览器编写特定的代码。过去,如文档中所述,IE浏览器和Firefox浏览器在处理焦点轮廓方面有不同的表现。IE6和IE7需要使用特定的表达式代码来移除,而Firefox则需要通过CSS...

    css实现a“标签点击无虚线.rar

    这样,当鼠标悬停在链接上时,就不会显示虚线边框。 3. **过渡效果** 为了提供更好的用户体验,我们可能希望在链接被点击时有一个平滑的过渡。可以添加`transition`属性来实现: ```css a { border: none; ...

    如何将链接的下划线做成虚线?.rar

    我们在浏览网页的时候,经常可以看到链接的下划线是虚线,或者在link与hover不同状态,下划线会从虚线到实线的变化。这样的效果是如何实现的呢? 其实这样的效果,是设置text-decoration:none。也就是去除了链接的...

Global site tag (gtag.js) - Google Analytics