讓 select 的 option 標簽支持事件監聽（如復制操作）

這標題，讓option支持事件監聽，應該不難的呀，有什么好講的？

其實還是有的，默認在瀏覽器代碼是無法直接對option標簽進行操作的，不僅包括JS事件監聽，還是CSS樣式設置

查了一些資料，姑且認為它是系統OS級別處理的

 

想自定義option的樣式，很多人會建議用 <ul> <li> 標簽來輔助同步操作與值

想對option進行事件監聽，有一個tip：當給select顯示設置了size 屬性且值 大於1 時，才能監聽

 

近來產品也提了個鼠標操作復制option值的需求，就利用這個size屬性實現一番吧

先看圖

實現小析

因為select的size屬性表示默認展示多少個option，並設置這個高度

不過有了size之后，默認select右側就會出現滾動條式樣，加個 overflow:hidden 處理就行了

此外，功能操作與原select也有一些些不同，也要模擬處理

右鍵后生成一個復制按鈕，點擊復制則調用瀏覽器自身的復制命令

 

HTML

    <p>
        <input type="text" id="select-val" placeholder="值" size="1">
        <input type="text" id="copy-test" placeholder="測試復制">
    </p>

    <select style="overflow:hidden;">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
        <option value="5">five</option>
    </select>

復制按鈕的模板

要注意一個點，id為myCopyVal放在此處是為了方便定位元素，再調用文本select()方法，調用此方法時要求dom元素不能隱藏

所以需用 opacity:0 代替 type="hidden" | display:none | visibility:hidden

    <script type="text/template" id="btn-tpl">
        <p id="myCopy" style="position:fixed;z-index:1000;top:{{Y}}px;left:{{X}}px;margin:0;">
            <input type="button" id="myCopyBtn" style="border:1px solid #999;border-radius:3px;cursor:pointer;" value="復制"/>
            <input type="text" id="myCopyVal" style="opacity:0" value="{{val}}"/>
        </p>
    </script>

JS部分

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        // 模擬size的變化
        $('select')
            .focus(function() {
                // 動態設置size支持option的事件監聽
                this.size = this.children.length;
            })
            .blur(function() {  
                // 恢復
                this.size = 1;
            })
            .change(function() {
                // 上下快捷鍵操作時，隱藏按鈕
                $('#myCopy').remove();
                $('#select-val').val(this.value);
            });
        
        $('option')
            // 右鍵展示復制按鈕
            .contextmenu(function(e) {
                $('#myCopy').remove();

                $('body').append($('#btn-tpl').html()
                    // 設置按鈕位置
                    .replace('{{Y}}', e.pageY)
                    .replace('{{X}}', e.pageX + 10)
                    .replace('{{val}}', e.target.textContent || e.target.innerText)
                );

                return false;
            })
            // 點擊操作恢復正常select
            .click(function() {
                $('#myCopy').remove();
                $(this).parent().blur();
            });

         
        $(document)
            // 直接Enter鍵 模擬select選擇
            .keydown(function(e) {
                if (e.keyCode === 13) {
                    $('#myCopy').remove();
                    $('select').blur();
                }
            })
            // 點擊外部區域，隱藏按鈕
            .click(function(e) {
                if (e.target.id !== 'myCopyBtn') {
                    $('#myCopy').remove();
                }
            });

        // 執行復制操作
        $(document).on('click', '#myCopyBtn', function() {
            var $this = $(this);
            // 復制
            $this.next().select();
            document.execCommand('Copy');

            // 這里先不直接remove，防止循環引用
            $this.parent().hide();
            // 再次展示select下拉
            $('select').focus();
        });
    </script>

當然了，這個execCommand方法可能在某些瀏覽器上不支持，這里還沒做兼容，復制功能也還有些簡陋

就醬