Ich habe div, das bearbeitet werden kann, damit ich anzeigen kann, was eingegeben wird und für jede neue Zeile würde ich ein ">" Symbol anzeigen, um die nächste Zeile anzuzeigen.So zeigen Sie eine spitze Klammer für eine neue Zeile

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); 
    } 
});

Im Moment, als ich die Eingabetaste drücken meinen Text aufmerksam gemacht wird, und dann wird eine neue Zeile angezeigt wird, sondern weil ich Wenn das ">" hart codiert ist, bleibt es an seinem ursprünglichen Ort, so:

> Einiger Text

Noch mehr Text

ich es will jede neue Zeile wie folgt folgen:

> Einiger Text

> Noch mehr Text

, und dann Entfernen Sie das letzte Symbol wie folgt:

Einige Text

> Noch mehr Text

Quelle

2017-09-17 Boats

@ RokoC.Buljan einfügen haha, tut mir leid, die untere – Boats

was ist, wenn man sagt: gibt 3 Zeilen Text und dann auf die erste Zeile und editiert die erste Zeile? –

@ RokoC.Buljan Ich werde die Möglichkeit entfernen, den vorherigen Text zu bearbeiten, es würde funktionieren, als ob es Befehlszeile war – Boats

Verwenden :before pseudo für Ihre editierbare DIV und .before() verwenden, wenn schlagen Geben Sie einen nicht bearbeitbaren DIV

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 
 
    } 
 

 
});

#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"; 
 
}

<div id="textFieldWrapper"> 
 
    <pre contenteditable id="textField">GO</pre> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Quelle

2017-09-17 15:47:21

Perfekt, danke :) – Boats

@Boote du bist willkommen! (P. hat meine Antwort bearbeitet, um die Höhe der leeren DIVs zu verbessern) –

So zeigen Sie eine spitze Klammer für eine neue Zeile

HTML

CSS

jQuery

Antwort

Verwandte Themen