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效果
- 先把
tabIndent.js文件放入admin/js/目录下 - 在
admin/write-js.php文件的第五行添加如下代码
<script src="<?php $options->adminStaticUrl('js', 'tabIndent.js'); ?>"></script>- 在
admin/write-js.php中的<script>标签的尾部也就是ready事件的底部,第258行添加如下代码
// textarea框的tab缩进
var textArea = document.getElementById('text');
tabIndent.render(textArea);