HTML

Question

我有可编辑的div，因此我可以显示输入的内容以及每个新行我将显示＆＃34;＆gt;＆＃34;符号显示下一行。

HTML

<body>
      <div> 
            <span> &gt; </span> 
            <div contenteditable="true" id="textField"></div> 
      </div>        
</body>

CSS

body > div > span
{
    float: left;
    padding-top: 10px;
}

body > div > div
{
    outline: 0;
    display: flow-root;
    margin-left: 15px;
    padding: 10px;
}

的jQuery

$('#textField').keyup(function(e)
{
   if(e.keyCode == 13)
   {
      var inputGiven = $('#textField').text();
      alert(inputGiven);
   }
});

在我按下输入的那一刻，我的文字被提醒，然后出现一个新行，但因为我已经硬编码了＆＃34;＆gt;＆＃34;它仍保留在原来的位置，如下：

＆GT;一些文字

更多文字

我希望它遵循这样的每一个新行：

＆GT;一些文字

＆GT;还有一些文字

，然后删除最后一个符号，如下所示：

一些文字

＆GT;还有一些文字

Answer 1

对您的可编辑DIV使用:before伪，并在按 Enter 插入不可编辑的DIV时使用.before()

＆＃13;

var $textField = $('#textField');
var $textFieldWrapper = $('#textFieldWrapper');

$textField.on("keydown", function(e) {

  if (e.which === 13) {
    e.preventDefault(); // prevent the browser do default stuff on Enter
    
    var value = $.trim($textField.text()); // Trimmed value

    $textField.before("<pre>" + value + "</pre>"); // insert noneditable DIV with value
    $textField.html(""); // Reset value of editable element
    $textFieldWrapper.scrollTop( $textFieldWrapper[0].scrollHeight ); // Scroll wrapper
  }

});

＆＃13;

#textFieldWrapper {
  border: 1px solid #ddd;
  height: 6em;
  padding: 8px 0;
  overflow-y: scroll;
  background: #363839;
  color: #0bf;
}

/* CLI lines */
#textFieldWrapper > pre {
  position: relative;
  min-height: 1em;    /* set some min-height */
  margin: 0;
  padding-left: 24px; /* 24px left space used for the > pointer */
}

/* CLI editable field */
#textField {
  outline: 0;
}

/* CLI editable pointer */
#textField:before {
  position: absolute;
  left: 8px;
  content: "\3e";
}

＆＃13;

<div id="textFieldWrapper">
  <pre contenteditable id="textField">GO</pre>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

＆＃13;

如何显示新行的尖括号

HTML

CSS

的jQuery

1 个答案: