使用JavaScript键盘凹痕

Question

我有以下textArea字段来编写html代码，例如尝试编辑器。

<textarea class="form-control" required rows="15" id="code" 
Placeholder="আপনার HTML এবং CSS কোডগুলো এখানে লিখুন তারপর আউটপুট দেখার জন্য 
নিচের নীল বাটনটিতে ক্লিক করুন..." name="code"></textarea>

在此框中，我需要使用凹痕。因此，如果盒子没有文本，则凹痕工作正常最后一行。

这是实时链接：

http://amarcourse.com/try-it-editor/input.html

这是我用于该凹痕的JS代码：

<script type="text/javascript">
    var myInput = document.getElementById("code");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }
    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>

Answer 1

var myInput = document.getElementById("code");
if (myInput.addEventListener) {
  myInput.addEventListener('keydown', this.keyHandler, false);
} else if (myInput.attachEvent) {
  myInput.attachEvent('onkeydown', this.keyHandler);
}
function keyHandler(e) {
  var TABKEY = 9;
  var TABVAL = "    ";
  if (e.keyCode == TABKEY) {
    if (document.selection) {
      myInput.focus();
      sel = document.selection.createRange();
      sel.text = TABVAL;
    } else if (myInput.selectionStart || myInput.selectionStart == '0') {
      var startPos = myInput.selectionStart;
      var endPos = myInput.selectionEnd;
      myInput.value = myInput.value.substring(0, startPos) + TABVAL + myInput.value.substring(endPos, myInput.value.length);
      myInput.selectionStart = startPos + TABVAL.length;
      myInput.selectionEnd = startPos + TABVAL.length;
    } else {
      myInput.value += TABVAL;
    }
    if (e.preventDefault) {
      e.preventDefault();
    }
    return false;
  }
}

<textarea id="code" placeholder="type something with tabs!"></textarea>

您需要将字符串插入当前位置。基于这个的答案。