返回列表

Textarea的Tab缩进

默认分类 2018/07/03 13:24

转载自：http://www.jwsblog.com/archives/12.html 由于原文中Git链接已经失效，故转载备注一下最新地址

textarea的Tab缩进

我们常常习惯了在各种代码编辑器里使用tab进行代码缩进，增加代码可读性和美观，通常在Markdown中也有tab缩进区分等级，例如列表序列，二级列表在开头会多缩进一点。那么问题来了，一按tab焦点就自动转移了下一个html元素上了，不免大失所望。

现在推荐一款轻量的js插件解决这个问题,tabIndent.js

调用方法

---

• 先引入js文件

  <script src="tabIndent.js"></script>`

• 对页面所有textarea都可tab缩进

`tabIndent.renderAll();`

• 也可针对某个textarea单独设置

`var el = document.getELementById('#targetTextArea');
    tabIndent.render(el);`

• 也可以动态删除他们的tab效果

`// 全部清掉效果
    tabIndent.removeAll();
    // 清除某个元素的tab缩进效果
    var el = document.getElementById('#textareaWithTabIndent');
    tabIndent.remove(el);`

## Typecho系统的后台文章新增/编辑的`textarea`框增加`tab`效果

1.先把tabIndent.js文件放入admin/js/目录下
2.在admin/write-js.php文件的第五行添加如下代码

<script src="adminStaticUrl('js', 'tabIndent.js'); ?>"></script>

3.在admin/write-js.php中的<script>标签的尾部也就是ready事件的底部，第258行添加如下代码

// textarea框的tab缩进
var textArea = document.getElementById('text');
tabIndent.render(textArea);