如何创建AngularJS自定义邮箱指令：带@something.com占位符并自动追加后缀

I’ve built exactly this kind of directive for projects where all user emails share a fixed domain suffix—total time-saver for users. Let’s walk through the implementation that checks all your boxes:

Core Behavior #

• Displays @something.com as the input placeholder
• Blocks users from typing the @ character (we’ll auto-add the full suffix)
• Automatically appends @something.com when the user leaves the input field
• Avoids duplicate suffixes if the user accidentally types part or all of it

Full Directive Code #

angular.module('yourApp').directive('fixedSuffixEmail', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      const fixedSuffix = '@something.com';
      
      // Set the placeholder right away
      element.attr('placeholder', fixedSuffix);
      
      // Block users from typing @ (no need for it)
      element.on('keydown', function(e) {
        if (e.key === '@') {
          e.preventDefault();
        }
      });
      
      // Auto-add suffix when user leaves the input
      element.on('blur', function() {
        let currentValue = ngModelCtrl.$viewValue || '';
        
        // Skip if input is empty or suffix already exists
        if (!currentValue.includes(fixedSuffix) && currentValue.trim() !== '') {
          const formattedValue = currentValue.trim() + fixedSuffix;
          ngModelCtrl.$setViewValue(formattedValue);
          ngModelCtrl.$render();
        }
      });
      
      // Handle programmatic model updates (e.g., loading from DB)
      ngModelCtrl.$formatters.push(function(value) {
        if (value && !value.includes(fixedSuffix)) {
          return value + fixedSuffix;
        }
        return value;
      });
    }
  };
});

How to Use It #

Just add the fixed-suffix-email attribute to any input bound to ngModel:

<input type="text" ng-model="user.email" fixed-suffix-email>

Key Logic Breakdown #

• Blocking @ input: We listen for the keydown event and stop the @ character from being typed—users don’t need to enter it manually.
• Auto-suffix on blur: When the user moves focus away, we check if the value already has the suffix. If not (and the input isn’t empty), we append it and update the ngModel.
• Placeholder feedback: The placeholder clearly shows users what suffix will be added, so they know only the prefix is needed.
• Programmatic support: The $formatters hook ensures that if you set the email value via code (like loading from a backend), it still gets the suffix if it’s missing.

Edge Cases Covered #

• Empty input: Won’t add the suffix if the user didn’t type anything.
• Duplicate suffix: If the user accidentally types @something.com themselves, we leave it as-is instead of doubling up.
• Whitespace handling: We trim extra spaces from the user’s input before appending the suffix to keep emails clean.

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