• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使select在选中/聚焦时列出所有选项目前比较好的处理方式
    在开发中，遇到这样一个需求情况，因此记录下来以备用

    需求背景

    在页面上使用快捷键盘快捷定位到支付方式选择框（一个下拉列表）并进行选择。

    技术难点

    目前浏览器并不支持通过代码定位下拉列表时就列出其下所有选项，只能通过鼠标点击。

    在网上找了些资料后，得出目前比较好的处理方式；

    利用select的size属性，配合盒子布局的position属性来实现，具体代码如下：

    复制代码
    代码如下:

    <td align="right">
    支付方式:
    </td>
    <td style="padding:0px;vertical-align:top;">
    <!-- 这里必须用div包着select，否则在ff下不兼容 -->
    <span style="color:#ff0000"><div style="position:relative;padding:1px;">
    </span> <select id="payType" name="payType" style="position:absolute;" onfocus="expand(this)" onblur="unexpand(this)">
    <option>人民币</option>
    <option>美元</option>
    <option>信用卡</option>
    <option>港币</option>
    <option>港币</option>
    </select>
    <span style="color:#ff0000"></div>
    </span></td>

    expand和unexpand方法都很简单：

    复制代码
    代码如下:

    function expand(obj){
    $(obj).attr("size","10");
    }
    function unexpand(obj){
    $(obj).attr("size","1");
    }

    把select的position设置为absolute，使其不影响dom的流布局。再把其容器的position设置为relative，使select根据其容器来定位。

    这里需要注意的是在table元素中必须使用div作为select的容器，因为根据w3c的css标准，在table相关元素设置position:relative是未定义的，所以在ff下select元素会直接根据body元素来定位。

    参考的资料：

    http://www.php-insite.com/autoexpand_select.html 直接查看页面源代码
    http://bbs.csdn.net/topics/330158935 留意lingshuo1993的回答
    上一篇：Html+CSS浮动的广告条实现分解
    下一篇：无需太多的代码利用超链接即可实现简单自定义漂亮复选框
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    使select在选中/聚焦时列出所有选项目前比较好的处理方式 使,select,在,选中,聚焦,时,