长邮箱文本溢出容器、JS样式失效、失焦误触发问题修复

各问题根因及修复方案 #

• 长邮箱溢出问题 #

  优先选择CSS软换行+优先断点设置方案，比手动文本拆分、硬字符限制更优：手动拆分需要适配不同容器宽度、不同设备尺寸，维护成本高；硬字符限制会截断合法邮箱地址，影响正常输入。
  实现逻辑：给邮箱展示元素设置overflow-wrap: anywhere允许长文本换行，同时渲染邮箱内容时在@符号前插入<wbr>软换行标签，浏览器会优先在@位置断行，宽度足够时保持单行、宽度不足时自动把@域名部分折到第二行，完全符合预期效果。

• 红色下边框无法移除问题 #

  两个触发原因：
  1. style.removeProperty()方法接收的是CSS标准短横线格式的属性名，原代码传驼峰格式的borderBottom无法匹配到对应属性，自然删除失败
  2. 按钮点击调用main0()时没有传入输入框参数，执行到reg.test(emailField.value)时会抛出JS错误，中断后续代码执行
     修复方法：把移除属性的参数改为border-bottom，同时在函数开头做参数兜底，统一获取输入框元素，避免无参调用时报错。

• 点击任意位置触发展示问题 #

  根因是输入框绑定了onblur失焦事件直接调用提交逻辑，只要输入框失去焦点（点击页面任意位置都会触发失焦），校验通过就会直接执行展示逻辑，没有和按钮点击行为做区分。
  修复方法：把失焦触发的逻辑和按钮提交的逻辑拆分，失焦时只做格式校验和错误边框提示，只有点击「Show Email」按钮时才执行校验通过后的展示逻辑。

修复后完整代码 #

HTML代码 #

<div class="main">
  <div id="main1">
    <input class="user-input" id="input-id" placeholder="Email" onblur="checkEmailFormat()">
    <div class="btn0" id="btn0id" onclick="showEmail()">Show Email</div>
  </div>
  <div id="main2">
    <span id="name"></span>
  </div>
</div>

CSS代码 #

.main{
  text-align: center;
  background: black;
  width: 90%;
  max-width:25em;
  justify-content: center;
  align-items: center;
  border-radius: 1.5em;
  border-color: white;
  border-style: solid;
  border-width: 0.1em;
  box-shadow: 0 0 1em white;
  box-sizing: border-box;
  position: absolute;
  z-index: 10;
  padding: 2em;
}
body{
  color:white;
  background: #222;
}
.user-input{
  margin-bottom: 1em;
  padding: 0.5em;
  border: none;
  border-bottom: 0.2em solid #ccc;
  background: transparent;
  color: white;
}
#main2{
  display: none;
}
#name{
  display: block;
  overflow-wrap: anywhere;
  font-size: 1.2em;
  word-break: normal;
}
.btn0{
  cursor: pointer;
  padding: 0.5em 1em;
  border: 0.1em solid white;
  border-radius: 0.5em;
  display: inline-block;
}

JS代码 #

const inputEl = document.getElementById("input-id");
const main1El = document.getElementById("main1");
const main2El = document.getElementById("main2");
const nameEl = document.getElementById("name");
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

// 失焦仅做格式校验和错误提示
function checkEmailFormat(){
  if (!emailReg.test(inputEl.value.trim())) {
    inputEl.style.borderBottom = "0.2em solid darkred";
    setTimeout(function (){
      inputEl.style.removeProperty("border-bottom");
    },500);
    return false;
  }
  return true;
}

// 按钮点击才触发邮箱展示逻辑
function showEmail(){
  const emailVal = inputEl.value.trim();
  if (!emailReg.test(emailVal)) {
    inputEl.style.borderBottom = "0.2em solid darkred";
    setTimeout(function (){
      inputEl.style.removeProperty("border-bottom");
    },500);
    return;
  }
  // 在@前插入软换行标签，优先在@位置断行
  const showContent = emailVal.replace('@', '<wbr>@');
  setTimeout(function () {
    main1El.style.display = "none";
    setTimeout(function () {
      main2El.style.display = "block";
      nameEl.innerHTML = showContent;
    }, 100);
  }, 100);
}

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