如何实现<input>输入指定文本点击<button>后JS触发特定alert提示

云上老周

2026-9-23

实现方案

现有代码问题修正

JS代码多了一个多余的闭合花括号，会触发语法错误
form标签内的button默认type为submit，点击后会触发表单提交刷新页面，需要调整属性

完整可运行代码

HTML代码

<form>
    <input class="text" id="txt">
    <button type="button" id="btn" class="submit-btn" onclick="handleSubmit()">submit</button>
</form>

JS代码

// 若需要获取真实公网IP，可自行对接后端IP查询接口，这里先用模拟IP演示
function getUserIp() {
  return '192.168.3.45'
}

function handleSubmit() {
  const inputVal = document.getElementById('txt').value.trim()
  let result = ''

  // 匹配$开头的自定义指令
  if (inputVal.startsWith('$')) {
    // 拆分指令与参数，过滤空值
    const parts = inputVal.split(' ').filter(item => item)
    const command = parts[0]

    switch(command) {
      case '$ip':
        result = getUserIp()
        break
      case '$add':
        // 校验参数合法性
        if (parts.length !== 3) {
          result = '$add 指令用法：$add 数字1 数字2'
        } else {
          const num1 = Number(parts[1])
          const num2 = Number(parts[2])
          if (isNaN(num1) || isNaN(num2)) {
            result = '$add 后需跟随两个合法数字'
          } else {
            result = `${num1}+${num2}=${num1 + num2}`
          }
        }
        break
      default:
        result = '未识别的指令'
    }
  } else {
    // 非指令内容直接返回输入值
    result = inputVal
  }

  alert(result)
}