输入框复制按钮功能优化：自动拼接无+号的目标URL

你的问题出在两个地方：

• 原代码直接复制了输入框的原始值，没有对手机号做格式转换
• 你尝试修改的document.getElementById("example.com/","phonenumber")完全错误，这个方法只能接收一个元素ID作为参数，不能这么拼接字符串

正确的做法是先处理输入的手机号，再把处理后的URL写入剪贴板，具体修改如下：

修正后的完整代码 #

<input type="text" id="phonenumber" placeholder="例如：+123456789">

<div class="tooltip">
  <button type="button" onclick="myFunction()" onmouseout="outFunc()">
    <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
    Copy text
  </button>
</div>

<script>
function myFunction() {
  // 获取输入框元素
  const inputEl = document.getElementById("phonenumber");
  // 获取输入值并去除开头的+号
  const cleanNumber = inputEl.value.replace(/^\+/, '');
  // 拼接成目标URL格式
  const targetUrl = `example.com/${cleanNumber}`;
  
  // 写入剪贴板
  navigator.clipboard.writeText(targetUrl);
  
  // 更新提示文字
  const tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied";
}

function outFunc() {
  const tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
</script>

关键修改点说明 #

1. 处理手机号格式：用replace(/^\+/, '')正则表达式去掉开头的+号（如果用户输入的+不在开头，也可以用replace(/\+/g, '')去掉所有+号，根据需求调整）
2. 拼接目标URL：用模板字符串把example.com/和处理后的号码拼接起来
3. 复制处理后的内容：把拼接好的URL传给navigator.clipboard.writeText()，而不是输入框的原始值

另外，如果你想保留输入框选中的视觉反馈，可以继续保留inputEl.select()和inputEl.setSelectionRange()这两行，但这对复制结果没有影响，只是用户体验上的小细节。

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