如何让Bootstrap表单控件仅在双击编辑时显示焦点光晕？

问题分析 #

你当前的输入框默认处于readonly状态，但单击时仍会触发焦点并显示默认的蓝色光晕，不符合仅双击可编辑时才显示焦点样式的需求。核心是通过CSS控制不同状态下的焦点样式，配合JS切换状态时添加/移除标识类。

解决方案步骤： #

1. 修改HTML结构
   给输入框添加一个自定义类（比如name-editable-input），方便后续CSS精准控制：

<input type="text" class="form-control border-0 p-0 mb-1 name-editable-input" 
       onblur="handleBlur(this)" 
       readonly="true" 
       ondblclick="handleDbClick(this)" 
       onkeydown="handleEnter(event, this)" 
       value="{{ dict.directory.current_name }}" />

（注：把原onblur的内联逻辑抽成单独的handleBlur函数，方便统一处理）

2. 编写CSS样式
   默认隐藏readonly状态下的焦点光晕，仅当输入框处于可编辑状态且获得焦点时，才显示光晕：

/* 默认readonly状态下，移除焦点光晕 */
.name-editable-input:read-only:focus {
  outline: none;
  box-shadow: none; /* 适配Bootstrap的form-control默认焦点阴影 */
}

/* 可编辑状态下，恢复焦点光晕 */
.name-editable-input.editable:focus {
  outline: auto;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 复用Bootstrap默认焦点阴影样式 */
}

3. 完善JS逻辑
   在双击和失焦事件中，添加/移除editable类，标识输入框的可编辑状态：

function handleDbClick(input) {
  input.readOnly = false;
  input.classList.add('editable');
  input.focus(); // 双击后自动聚焦，提升用户体验
}

function handleBlur(input) {
  input.readOnly = true;
  input.classList.remove('editable');
}

function handleEnter(event, input) {
  if (event.key === 'Enter') {
    input.blur(); // 按回车后失焦，回到readonly状态
  }
}

原理说明 #

• 通过:read-only:focus伪类选择器，精准匹配处于只读状态且获得焦点的输入框，移除其焦点样式；
• 双击时给输入框添加editable类，此时输入框不再是只读状态，同时该类下的:focus样式会恢复焦点光晕；
• 失焦或按回车时，移除editable类并恢复只读状态，焦点样式再次被隐藏。

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