文本框是Web输入必不可少的一个控件,虽说现在有了很多所见所的的编辑器,但是在做一些输入比较简单的功能的时候,总不能引入一个庞大的编辑器代码是吧?比如说,syntax-heighlighter 的代码输入框。

一般情况下,textarea写些示例代码已经够用了。但是遇到需要缩进的时候就比较蛋疼。页面上的Tab按钮默认行为是跳转焦点,无法实现对文本框的内容进行缩进。如果要缩进,就得自己敲4个空格,天啊,敲死我咩~~

所以,想要不蛋疼,就得做hack。more

话说textarea有两个很好用的属性,selectionStart、selectionEnd(不确定ie是否有这两个属性,但是本人基本都不考虑ie了,[抠鼻]。实在不想放弃ie,也是可以用它的range的一些方法实现的,可以参考这个文章),分别表示当前被选中内容的开头和结尾。当selectionStart == selectionEnd的时候,表示没有选中内容,表现为一个闪呀闪呀的光标(一闪一闪亮晶晶……)。

因此,监听textarea的keydown事件,在按下tab的时候,往selectionStart的前面插入4个空格就达到我们想要的功能了。代码如下:

var onTextareaKeydown = function(e){
    if(e.keyCode == 9){
        e.preventDefault();
        var start = this.selectionStart, end = this.selectionEnd;
        var text = this.value;
        var tab = '    ';
        text = text.substr(0, start) + tab + text.substr(start);
        this.value = text;
        this.selectionStart = start + tab.length;
        this.selectionEnd = end + tab.length;
    }
}
document.getElementById('textarea').onkeydown = onTextareaKeydown;

点击这里查看活生生的小例子。

这个代码的实现还是比较简单的,不支持对选中多行的缩进。不过,能缩进单行了,多行还会远吗?

Comments
Write a Comment
  • okoala reply

    温馨提醒:同名事件的函数声明方式,最后演化成了window.onkeydown。这样tab下去,事件会触发两次哦。

  • iAzrael reply

    @okoala 呃, 谢谢提醒, 学艺不精啊, 泪奔~~

  • ca797 reply

    写得很是独到,把核心的思维都表白了出来。

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟