Hay dos campos, asunto y descripción y quiero agregar texto donde está el cursor. Significa que si el cursor está en la descripción, debe agregar texto en la descripción y si el cursor está en el tema, debe agregar texto en el campo de tema.
un campo es #subject otro es #description
¿Cómo puedo lograrlo?
<button type="button" class="btn btn-light mb-1" onclick="insertText('ticket_id')">Ticket ID</button> function insertText(text) { // here will be code }entradas
<textarea class="form-control form-control-solid" rows="4" id="description" name="description" placeholder="Description"></textarea> <input type="text" class="form-control form-control-solid" placeholder="Subject" name="subject" value="" />Hay una propiedad document.activeElement , que contiene el elemento enfocado actualmente, pero esto ya se cambiará cuando ocurra el evento de click , por lo que deberá usar el evento mousedown , que ocurre antes de que el foco cambie al botón.
Luego, se puede usar element.selectionStart para determinar la ubicación del cursor. Si también necesita reemplazar el texto seleccionado en la entrada, debe usar esto en combinación con element.selectionEnd y modificar el controlador de clics en consecuencia.
Aquí hay un ejemplo:
ticketIdButton = document.getElementById('ticketIdButton') ticketIdInput = null ticketIdInputCursorLocation = 0 // In mousedown event document.activeElement has not changed yet // which allows to keep track of previously focused input ticketIdButton.addEventListener('mousedown', function() { activeElement = document.activeElement // For simplicity, let's use ticketIdInput class to identify // the acceptable inputs for ticket id if (activeElement.classList.contains('ticketIdInput')) { ticketIdInput = activeElement ticketIdInputCursorLocation = activeElement.selectionStart } else { ticketIdInput = null } }) ticketIdButton.addEventListener('click', function() { ticketId = '#1234' if (ticketIdInput !== null) { ticketIdInput.value = ticketIdInput.value.substring(0, ticketIdInputCursorLocation) + ticketId + ticketIdInput.value.substring(ticketIdInputCursorLocation) } }) <textarea id="description" class="ticketIdInput" placeholder="Description"></textarea><br /> <input id="subject" class="ticketIdInput" placeholder="Subject"><br /> <hr> <button type="button" id="ticketIdButton">Ticket ID</button>