javascript - 如何在文本字段中添加浏览按钮？

Question

我需要在文本字段中添加一个具有文件浏览功能的文件浏览按钮，这样在点击浏览按钮时，所选文件名(只需要选择一个文件)就会显示在文本字段中它位于其中。

浏览按钮必须位于文本框内。浏览的文件名必须显示在该文本框中..

Answer 1

这就是你想要的。 insertAtCursor 函数来自 How to insert text into the textarea at the current cursor position? .

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>