如何在不使用value属性时将input后文本设为submit按钮的title

首先明确你代码出错的原因：<input>是自闭合的空标签，你写在它后面的Send会被浏览器当成按钮外的独立文本渲染，所以才会出现按钮显示默认文字、旁边还挂着Send的错误效果。

下面给你两种符合需求的解决方案：

方案1：用<button>元素实现（推荐） #

这是最直接的方式，不需要用value属性，还能完美实现你要的效果：

<button type="submit" title="Send">Send</button>

• 标签内部的Send会直接作为按钮的显示文字
• title属性会在鼠标悬停时显示提示文本，完全满足你的要求

方案2：用JavaScript处理原有<input>结构 #

如果一定要保留<input>标签，又不想手动写value，可以用JS动态处理：

<input type="submit" id="submitBtn">Send
<script>
  const submitBtn = document.getElementById('submitBtn');
  // 提取按钮后面的文本内容
  const btnText = submitBtn.nextSibling.textContent.trim();
  // 设置按钮的title属性
  submitBtn.title = btnText;
  // 把文本设为按钮显示文字（通过JS设置value，而非HTML硬写）
  submitBtn.value = btnText;
  // 删除按钮外多余的文本节点
  submitBtn.nextSibling.remove();
</script>

• 这段代码会自动把你写在<input>后面的Send转成按钮的title，同时设置为按钮显示文字，最后清理掉多余的外部文本。

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