Safari浏览器用户名密码输入框Tab键异常问题求助

Safari下输入密码时焦点跳回用户名框的核心原因：

• 当前onInputChange方法被密码框输入事件触发时，仍会执行_self.loginInputs.userName = inputValue，强制覆盖用户名绑定值，触发Angular脏检查。
• 页面中ng-if="login.isIOS"的Safari专属输入块会因脏检查重新渲染，而Safari的焦点管理机制会自动将焦点重置到用户名输入框。
• 其他浏览器对Angular DOM更新后的焦点处理逻辑不同，因此未出现该异常。

1. 拆分输入变更处理方法 #

把通用的onInputChange拆成分别处理用户名、密码的独立方法，避免交叉修改绑定值：

// 处理用户名输入变更
_self.onUserNameChange = function (inputValue) {
    _self.loginInputs.userName = inputValue;
    toggleLogin();
};

// 处理密码输入变更
_self.onPasswordChange = function (inputValue) {
    _self.loginInputs.password = inputValue;
    toggleLogin();
};

2. 重构toggleLogin方法 #

移除原方法中对userName的赋值逻辑，直接依赖_self.loginInputs的已有值，避免不必要的脏检查触发：

/**
 * @description Toggle Login button as per Input conditions.
 * @returns {}
 */
function toggleLogin() {
    _self.dropdownStatus = false;

    if (_self.loginInputs.userName !== undefined &&
        _self.loginInputs.userName.length !== 0 &&
        _self.loginInputs.password.length !== 0 &&
        !(basAuthService.authentication.isAuth && !basAuthService.authentication.isConfigReady)) {
        _self.loginButtonStatus = false;
    } else {
        _self.loginButtonStatus = true;
    }

    //For disable domain dropdown as per user conditions
    if (_self.loginInputs.userName.indexOf('@') > 0 || _self.loginInputs.userName.indexOf('\\') > 0) {
        _self.loginInputs.domain = '';
        _self.dropdownStatus = true;
    }
}

3. 调整模板事件绑定 #

把用户名输入框的ng-change绑定到onUserNameChange，密码框绑定到onPasswordChange，同时确保moveToPassword只绑定在用户名输入框的keydown事件上：

<!-- 常规用户名输入框 -->
<input type="text" 
       ng-model="login.loginInputs.userName"
       ng-keydown="login.moveToPassword($event)"
       ng-change="login.onUserNameChange(login.loginInputs.userName)">

<!-- Safari适配输入块 -->
<input type="text" 
       ng-if="login.isIOS"
       ng-model="login.loginInputs.userName"
       ng-keydown="login.moveToPassword($event)"
       ng-change="login.onUserNameChange(login.loginInputs.userName)">

<!-- 密码输入框 -->
<input type="password" 
       id="password"
       ng-model="login.loginInputs.password"
       ng-change="login.onPasswordChange(login.loginInputs.password)">

4. 优化moveToPassword方法（可选） #

用Angular的$element服务替代原生getElementById，更符合框架最佳实践：

_self.moveToPassword = function ($event, passwordElement) {
    if ($event.keyCode === 9) {
        $event.preventDefault(); // 阻止默认Tab行为，避免冲突
        passwordElement.focus(); 
    }
}

模板对应传递密码框元素：

<input type="password" 
       id="password"
       ng-model="login.loginInputs.password"
       ng-change="login.onPasswordChange(login.loginInputs.password)"
       #passwordInput>

<input type="text" 
       ng-model="login.loginInputs.userName"
       ng-keydown="login.moveToPassword($event, passwordInput)"
       ng-change="login.onUserNameChange(login.loginInputs.userName)">

• 测试Safari下Tab切换到密码框后输入字符，确认焦点不再跳转回用户名框
• 检查登录按钮状态、域名下拉框禁用逻辑是否正常工作
• 确认其他浏览器功能不受影响

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