Necesito agregar un botón de exploración de archivos con funcionalidad de exploración de archivos dentro del campo de texto, de tal manera que al hacer clic en el botón de exploración, el nombre de archivo seleccionado (solo se necesita seleccionar un archivo) se muestra en el campo de texto en el que se sienta
El botón de exploración debe estar DENTRO del cuadro de texto. El nombre del archivo que se buscó debe mostrarse en ese cuadro de texto.
Eso es lo que quieres. La función insertAtCursor es de ¿Cómo insertar texto en el área de texto en la posición actual del cursor? .
const textField = document.getElementById('text-field'), fileField = document.getElementById('file-field') fileField.onchange = function(e) { // Copy to clipboard functionality navigator.clipboard.writeText(fileField.value); // Inserting text into textarea at the cursor position insertAtCursor(textField, fileField.value); } function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; } //MOZILLA and others else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); } else { myField.value += myValue; } } <div class="container"> <input type="file" name="form" id="file-field"> <hr /> <textarea name="form" id="text-field" cols="30" rows="10" placeholder="Write here..."></textarea> </div>Simplemente haga esto con un detector de eventos onchange en el campo input[type=file]. Luego toma el valor y lo pega en el campo de texto.
const textField = document.getElementById('text'); const fileField = document.getElementById('file'); fileField.onchange = function(e) { textField.value = e.target.value; } <div class="container"> <input type="file" name="file" id="file"> <hr /> <textarea name="text" id="text" cols="30" rows="10" placeholder="Write here..."></textarea> </div>