js 控制 div contenteditable 只能輸入純文本

解決非 webkit 內核 DIV 不完全兼任 user-modify: read-write-plaintext-only 問題:

app.controller('demo_controller', ['$scope', 'tool', '$window', function ($scope, tool, $window) {
            angular.element('[contenteditable]').each(function() {
                // 幹掉IE http之類地址自動加鏈接
                try {
                    document.execCommand("AutoUrlDetect", false, false);
                } catch (e) {}

                angular.element(this).on('paste', function(e) {
                    e.preventDefault();
                    var text = null;

                    if(window.clipboardData && clipboardData.setData) {
                        // IE
                        text = window.clipboardData.getData('text');
                    } else {
                        text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在這裏輸入文本');
                    }
                    if (document.body.createTextRange) {
                        if (document.selection) {
                            textRange = document.selection.createRange();
                        } else if (window.getSelection) {
                            sel = window.getSelection();
                            var range = sel.getRangeAt(0);

                            // 創建臨時元素,使得TextRange可以移動到正確的位置
                            var tempEl = document.createElement("span");
                            tempEl.innerHTML = "&#FEFF;";
                            range.deleteContents();
                            range.insertNode(tempEl);
                            textRange = document.body.createTextRange();
                            textRange.moveToElementText(tempEl);
                            tempEl.parentNode.removeChild(tempEl);
                        }
                        textRange.text = text;
                        textRange.collapse(false);
                        textRange.select();
                    } else {
                        // Chrome之類瀏覽器
                        document.execCommand("insertText", false, text);
                    }
                });
                // 去除Crtl+b/Ctrl+i/Ctrl+u等快捷鍵
                angular.element(this).on('keydown', function(e) {
                    // e.metaKey for mac
                    if (e.ctrlKey || e.metaKey) {
                        switch(e.keyCode){
                            case 66: //ctrl+B or ctrl+b
                            case 98:
                            case 73: //ctrl+I or ctrl+i
                            case 105:
                            case 85: //ctrl+U or ctrl+u
                            case 117: {
                                e.preventDefault();
                                break;
                            }
                        }
                    }
                });
            });
        }]);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章