Bootstrap 5表单URL预览链接：实现空值时禁用点击功能

算力阿峰

2026-8-24

实现方案

1. 调整HTML结构

给预览链接加个初始的禁用样式类，同时移除原来的onclick事件（后续通过输入监听同步更新）：

<div class="form-group form-group-md" style="margin:10px;padding:10px 0 0 0;">
  <label for="fUrl"><i class="fa-solid fa-link"></i>URL</label>
  <div class="input-group">
    <input type="text" class="form-control" maxlength="255" id="fUrl" name="fUrl" value="">
    <span class="input-group-text">
      <a href="" target="_blank" id="HreffUrl" title="Anteprima" class="disabled-link">A</a>
    </span>
   </div>
</div>

2. 添加禁用样式

在CSS里定义禁用状态的视觉和交互效果，让用户一眼看出链接不可用：

.disabled-link {
  pointer-events: none; /* 禁止点击交互 */
  opacity: 0.6; /* 视觉上变灰 */
  cursor: not-allowed; /* 鼠标指针显示禁用样式 */
}

3. 优化JavaScript逻辑

监听输入框的实时输入，动态切换链接的禁用状态并同步URL：

// 提前获取元素，避免重复查询DOM
const urlInput = document.getElementById('fUrl');
const previewLink = document.getElementById('HreffUrl');

// 定义更新链接状态的函数
function updateLinkStatus() {
  const inputVal = urlInput.value.trim(); // 去掉首尾空格，避免空字符误判
  if (inputVal) {
    // 输入有内容时：启用链接，设置正确的href
    previewLink.href = inputVal;
    previewLink.classList.remove('disabled-link');
  } else {
    // 输入为空时：禁用链接，清空href
    previewLink.href = '';
    previewLink.classList.add('disabled-link');
  }
}

// 页面加载时先执行一次，确保初始状态正确
updateLinkStatus();

// 监听输入框的实时输入事件，每次输入都更新状态
urlInput.addEventListener('input', updateLinkStatus);