javascript textarea 中如何实现输入tab键

问题描述

问 题

实现areatext输入tab键。（替换成4个空白字符）;
我的方法是检测输入的字符编码，如果==9的话就替换成 ，但是没有效果，不知道问题是出在哪里了。代码如下：

/**
 * Created by luojw on 2017-3-9.
 */
var textbox = document.getElementById("input"),
    inputData,
    dataArr,
    keyCode;

//事件对象
var EventUtil = {
    //根据浏览器对象来使用不同的方法添加事件
    addHandler : function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, true);//dom2级事件处理,在冒泡阶段捕获
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);//ie事件处理
        } else {
            element["on" + type] = handler;//dom0级事件处理
        }
    },

    //取消事件默认行为
    preventDefault : function (event) {
       if (event.preventDefault) {
           event.preventDefault();
       }  else {
           event.returnValue = false;
       }
    },

    //取得event事件对象
    getEvent : function(event) {
        return event ? event : window.event;
    },

    //取得输入的字符编码
    getCharCode : function(event) {
        return event.keyCode;
    },
    //使tab键输出在textarea中
    inputTab : function(event) {
        keyCode = EventUtil.getCharCode(event);
        EventUtil.preventDefault(event);
        if (keyCode == 9) {
            EventUtil.preventDefault(event);
            alert("输入tab");
            inputData += "  ";
        }
    },
};
var test = document.querySelector(".left-input");
EventUtil.addHandler(textbox, "keypress", function () {
    EventUtil.inputTab(EventUtil.getEvent());
});

解决方案

把 keypress 换成 keydown，然后 inputTab 函数改一下：

inputTab : function(event) {
  keyCode = EventUtil.getCharCode(event);
  // 此处会影响其它按键事件，所以去掉
  // EventUtil.preventDefault(event); 
  if (keyCode == 9) {
    EventUtil.preventDefault(event);
    alert("输入tab");
    // 此处无法修改输入框内容，需要用 textbox.value
    // inputData += "  "; 
    textbox.value += "  ";
  }
}

我是这么理解的：

1. keypress 是按下松开后才触发事件，但是在按下 tab 键还没松开时，input 已经失焦，在松开按键后原本会触发事件的 input 就无法触发了。

2. keydown 是按下时就触发事件，在按下 tab 键还没松开时，input 在失焦前就触发事件，并且在回调函数里用了 preventDefault 阻止 tab 的默认事件，使得松开按键后 input 也不会失焦。

这篇关于javascript textarea 中如何实现输入tab键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！