如何用纯JavaScript将用户选择或输入内容赋值到短信消息内容中

逻辑规则 #

• 内容优先级：输入框自定义输入内容 > 单选框选中的预设值，输入框为空时自动读取选中的单选框数值
• 自动对短信内容做URI编码，避免特殊字符导致链接解析失败
• 点击按钮即可直接拉起系统自带短信应用，自动填充接收号码和短信内容

完整可运行代码 #

<!-- 修正补充属性后的HTML结构 -->
<input type="radio" name="T" id="twenT" value="20">
<label for="twenT">20</label>
<input type="radio" name="T" id="sixT" value="60">
<label for="sixT">60</label>
<input id="uIn" placeholder="输入自定义内容">
<a id="smsLink" href="sms://+15552345678?&body=CHANGE%20THIS" style="display: none;"></a>
<button id="sendBtn">生成短信</button>

<script>
// 纯JS实现逻辑
const smsLink = document.getElementById('smsLink');
const userInput = document.getElementById('uIn');
const sendBtn = document.getElementById('sendBtn');

// 更新短信内容的核心方法
function getSmsContent() {
  // 优先取输入框内容
  let content = userInput.value.trim();
  if (content) return content;
  // 输入框为空则取选中的单选框值
  const checkedRadio = document.querySelector('input[name="T"]:checked');
  return checkedRadio ? checkedRadio.value : '';
}

// 绑定按钮点击事件
sendBtn.addEventListener('click', () => {
  const content = getSmsContent();
  if (!content) {
    alert('请先选择预设值或输入自定义内容');
    return;
  }
  // 编码内容后更新短信链接
  const encodedContent = encodeURIComponent(content);
  smsLink.href = `sms://+15552345678?&body=${encodedContent}`;
  // 触发跳转拉起短信应用
  smsLink.click();
});
</script>

关键说明 #

• 给单选框新增了value属性方便直接读取选中值，新增label标签后点击文字也可选中单选框，交互更友好
• 短信链接默认隐藏，仅作为触发跳转的载体，也可自行显示给用户点击
• 部分安卓设备的短信协议格式可能存在差异，如果拉起失败可尝试把sms://+15552345678?&body=修改为sms:+15552345678?body=格式适配

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