将初始类型设置为电子邮件（具有用户友好键盘的优点），并相应地将按钮单击时的类型更改为文本/电子邮件，以在需要时删除对提交的限制：

<form>
<div class="form-floating">
    <input required autofocus type="email" class="form-control" 
    id="username" name="username" placeholder="username or email">
    <label for="username">username or email</label>
</div>
<input type="submit" value="normal" onclick="document.getElementById('username').setAttribute('type','email')">
<input type="submit" value="LDAP" onclick="document.getElementById('username').setAttribute('type','text')">
</form>

字符串

Ali Sheikhpour的解决方案将显示无效消息，当您在空白字段中按Enter键，然后继续键入：
x1c 0d1x的数据
因此，方向可以是在影子DOM中模仿电子邮件输入。适用于移动的Chrome。应该为Firefox/Safari进行调整。

的

const shadow = $email.attachShadow({ mode: "open" });
const email = document.createElement('input');
email.type = 'email';
email.required = true;

const style = getComputedStyle($username);
const keys = Object.keys(style).filter(key => key.match(/\D/));

Object.assign(email.style, {
  ...Object.fromEntries(keys.map(key => [key, style[key]])),
  position: 'absolute',
  backgroundColor:'transparent'
});

email.addEventListener('input', e => $username.value = email.value);

setTimeout(() => email.focus());

$username.setAttribute('tabindex', '-1');

Object.assign($username.style, {
  pointerEvents: 'none',
});

shadow.appendChild(email);

$form.addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData($form);
  
  console.log(...data);
});

.form-control{
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom:5px;
}

<form id="$form">
<div id="$input" class="form-floating">
    <span id="$email"></span>
    <input id="$username" required autofocus type="text" class="form-control" 
    placeholder="username or email" name="username">
    <label for="$username">username or email</label>
    <div>
    <input id="password" required type="password" class="form-control" 
    placeholder="password" name="password">
    <label for="password">username or email</label>
    </div>
</div>
<button>Login</button>
</form>