I have a textarea, when I press Enter I need to insert a custom {br} tag instead of wrap the text on a new line. I have solved the wrap issue with CSS, the problem is that when I press enter the tag is inserted at the end of the string. How can I insert it in the same position of the input?
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.
}
}
You can use textField.selectionStart and textField.selectionEnd to get the cursor position. Then use substring() to extract the two parts of the String, and concatenate the two with {br} in between
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>If the is not selecting text, this will insert at the cursor position. If he is, this will replace the selected text by {br}
You currently append your tag after the textField's value. Whatever is in your textField it'll always add it at the end.
You have to get your cursor's position, and insert your tag at this position in your textField's value, maybe using something like javascript slice I guess.