(共566篇)
全部分类

js向textarea输入tab字符
[ JS基础 ] 

在本博客的编辑器功能中,需要模仿 IDE 按下 tab 键插入四个空格功能,实现方式记录如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
document.onkeydown = function (e) {
    if (e.target.nodeName.toLowerCase() == 'textarea' && e.keyCode == 9) {
        e.preventDefault();
        var ele = e.target;
        var start = ele.selectionStart;
        var end = ele.selectionEnd;
        var tmp1 = ele.value.substr(0, start);
        var tmp2 = ele.value.substr(end);
        ele.value = tmp1 + '    ' + tmp2;
        ele.selectionStart = ele.selectionEnd = start + 4;
        $scope.$apply();
        // return false;
    }
};

注意

千万要注意几点:

  1. 里面的事件必须用原生 JS 实现,比如 textarea 我们通常会给他绑定到一个 angularjs 模型中,假设我们绑定模型为$scope.content,上面的代码中千万不要$scope.content来代替ele.value
  2. 插入 4 个空格之后,不要忘记重置输入框的锚点位置即:ele.selectionStart = ele.selectionEnd = start + 4
  3. 由于是在 angularjs 中使用原生 JS,为了保证 JS 的脏检查,最后推荐使用$scope.$apply()手动触发一次 angularJS 的脏检查。
  4. 浏览器本身有 tab 事件,比如 safari 和 chrome 中会将焦点跳转到地址栏,因此在自定义事件执行后不要忘记添加return false来阻止浏览器的事件,event.preventDefault同样可以达到阻止浏览器事件的目的