javascript textarea 中如何实现输入tab键-PHP中文网问答

实现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());
});

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

全部回复(1)

天蓬老师2017-04-11 12:35:55 1楼

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

我是这么理解的：

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

赞 +0

添加回复