Tengo un área de texto, cuando presiono Enter necesito insertar una etiqueta {br} personalizada en lugar de ajustar el texto en una nueva línea. He resuelto el problema de la envoltura con CSS, el problema es que cuando presiono enter, la etiqueta se inserta al final de la cadena. ¿Cómo puedo insertarlo en la misma posición de la entrada?
HTML
<textarea class="form-control d-inline-block ml-3 my-auto" rows="1" value="" onkeydown="tagOnInput(this, window.event.keyCode)"></textarea>CSS
textarea[rows="1"] { overflow: auto; white-space: nowrap; }JS
function tagOnInput(textField, key){ if (key === 13) { textField.value = textField.value + "{br}"; // Tag is added at the end, but should be in the cursor position. } }Puede usar textField.selectionStart y textField.selectionEnd para obtener la posición del cursor. Luego use substring() para extraer las dos partes de String y concatene las dos con {br} en el medio
const el = document.getElementById("area") const btn = document.getElementById("btn") area.addEventListener('keydown', (e) => { if (e.which === 13) { e.preventDefault() const selectionStart = el.selectionStart const selectionEnd = el.selectionEnd const value = el.value const toInsert = '{br}' const partLeft = value.substr(0, selectionStart) const partRight = value.substr(selectionEnd) el.value = partLeft + toInsert + partRight el.focus() el.selectionEnd = selectionEnd + toInsert.length el.selectionStart = selectionEnd + toInsert.length } }) <label>Textarea</label> <textarea id="area"></textarea> Si no está seleccionando texto, se insertará en la posición del cursor. Si es así, esto reemplazará el texto seleccionado por {br}
Actualmente agrega su etiqueta después del valor de textField. Lo que sea que esté en su campo de texto, siempre lo agregará al final.
Debe obtener la posición de su cursor e insertar su etiqueta en esta posición en el valor de su campo de texto, tal vez usando algo como una porción de javascript , supongo.