zoukankan      html  css  js  c++  java
  • 让默认焦点的按钮无虚框(又来无聊了)

         有时候在搜索文本框中输入内容,回车最好要求可以直接跳到搜索页面,也就是说在文本框输入内容回车时焦点要在搜索按钮上才行,在WEB FORM里,拉一个普通的服务器按钮button默认是有焦点的,如果搜索页就一个按钮,输入点在搜索框上也可以清晰看到焦点落到了搜索按钮button上了,但是用服务器的imagebutton或linkbutton是没有的,点搜索文本框输入可以发现焦点并不聚焦在她们身上,但是可以在页面加载的时候让其为默认焦点,在form里加标记,如下

    <form id="form1" runat="server" defaultbutton="imgbutSearch">//将按钮ID给她

    但是有一点不太好,也看到网上也提到的就是设置默认焦点时会在按钮周围产生一个虚框,确实有点影响雅观。有没有方法除掉这个影响雅观的东西呢?答案是肯定的:)  之所有要让焦点落到按钮上,无非就是要让在回车的时候可以执行按钮里的事件,既然这样,我们可以在点enter键的时候来进行处理

    <script type="text/javascript"> 
         
    function check()
         {
            
    if(trim(document.getElementById("teSearch").value) == "")
            {
                alert(
    "请先输入搜索关键字");
                form1.teSearch.focus();
                
    return false;
            }
          }
            
    function document.onkeydown() 
           { 
              
    //var e = event.srcElement;
              if(event.keyCode==13
              { 
                 document.getElementById(
    "btnSearch").focus();
              } 
           }
    function trim(str)
    {
         
    return str.replace(/(^\s*)|(\s*$)/g,"");
    }
    </script>

    像上面那样,然后服务器段给btnSearch加个属性,在page_load里加上btnSearch.Attributes.Add("onclick","return check();");

    这样只要在按下回车键的时候 就会执行按钮事件,相当于执行了你想要聚集的按钮事件,避免了加载时默认聚集的虚线边框或者鼠标在搜索文本框上时出现虚线边框

    另外如果是链接href标签点击的时候如果想去掉虚线框可以加一句 onfocus=this.blur()  这个很早网上别人是这么做的,如下面

    <A onfocus=this.blur() href="xxx.html" target=_blank><IMG height=115 src="/imgFace/postImg/fate.jpg" width=106 border=0></A>

  • 相关阅读:
    javascript
    vue-cli3 按需加载loading,服务的方式调用
    chrome devTool
    vuex
    git
    DNS寻址以及IP解析
    es6小记
    webpack 安装vue(两种代码模式compiler 和runtime)
    游戏屏幕朝向
    C#读写Json
  • 原文地址:https://www.cnblogs.com/peaceli/p/1362257.html
Copyright © 2011-2022 走看看