如何实现点击按钮将文本文件内容插入typeInTextarea光标位置

你的typeInTextarea函数已经写得很扎实了，核心的光标位置插入逻辑完全没问题——咱们只需要补上获取文本文件内容的环节就行。下面分两种常见场景给你修改方案：

场景1：加载服务器上的文本文件（比如同目录下的SOMETEXT.txt） #

浏览器出于安全限制，不能直接通过路径读取本地文件，但如果文件是放在服务器上的，我们可以用AJAX请求获取内容，再传给你的插入函数：

// 保留你原来的插入函数，这个逻辑完全不用改
function typeInTextarea(el, newText) { 
  var start = el.prop("selectionStart") 
  var end = el.prop("selectionEnd") 
  var text = el.val() 
  var before = text.substring(0, start) 
  var after = text.substring(end, text.length) 
  el.val(before + newText + after) 
  el[0].selectionStart = el[0].selectionEnd = start + newText.length 
  el.focus() 
  return false 
}

// 修改按钮点击事件：先请求文件内容，再执行插入
$("button").on("click", function() { 
  // 用jQuery的get方法请求目标文本文件
  $.get("SOMETEXT.txt")
    .done(function(fileContent) {
      // 请求成功后，把文件内容传给插入函数
      typeInTextarea($("textarea"), fileContent);
    })
    .fail(function() {
      // 处理请求失败的情况，给用户提示
      alert("无法加载文本文件，请检查文件路径是否正确");
    });
  return false;
})

注意事项： #

• 确保SOMETEXT.txt和你的HTML文件在同一服务器目录下，或者填写正确的相对/绝对路径
• 如果是跨域请求，需要服务器配置CORS允许访问

场景2：让用户选择本地的文本文件插入 #

如果是要让用户自己选择本地的文本文件，我们可以添加一个隐藏的文件选择框，点击按钮时触发选择，再用FileReader读取内容：

<!-- 先添加一个隐藏的文件输入框 -->
<input type="file" id="fileInput" accept=".txt" style="display: none;">
<button id="insertBtn">插入文本文件内容</button>
<textarea id="myTextarea"></textarea>

// 保留原插入函数
function typeInTextarea(el, newText) { 
  var start = el.prop("selectionStart") 
  var end = el.prop("selectionEnd") 
  var text = el.val() 
  var before = text.substring(0, start) 
  var after = text.substring(end, text.length) 
  el.val(before + newText + after) 
  el[0].selectionStart = el[0].selectionEnd = start + newText.length 
  el.focus() 
  return false 
}

// 按钮点击时触发隐藏的文件选择框
$("#insertBtn").on("click", function() {
  $("#fileInput").click();
});

// 用户选择文件后，读取内容并插入到textarea
$("#fileInput").on("change", function(e) {
  var file = e.target.files[0];
  if (!file) return;

  // 只允许选择文本文件，提升用户体验
  if (!file.type.match('text.*')) {
    alert("请选择后缀为.txt的文本文件");
    return;
  }

  var reader = new FileReader();
  reader.onload = function(event) {
    var fileContent = event.target.result;
    // 调用插入函数，把文件内容插入到光标位置
    typeInTextarea($("#myTextarea"), fileContent);
  };
  reader.readAsText(file);
});

说明： #

• 这种方式纯前端就能实现，不需要依赖服务器，适合让用户插入本地文本文件的场景
• accept=".txt"限制用户只能选择文本文件，避免无效操作

两种方案都能完美实现你要的「在光标位置插入文件内容、不覆盖原有内容」的需求，你可以根据实际场景选择~

内容的提问来源于stack exchange，提问作者user9080416