Delphi 10.3 CE安卓端实现MaskEdit输入格式求助

Since Delphi 10.3 CE doesn’t include a built-in MaskEdit component for Android, we can build our own formatting logic using the TEdit control’s OnChange event. This will automatically format user input into the 9999 9999 9999 9999 pattern as they type.

Step 1: Set Up the Edit Control #

First, drop a TEdit onto your Android form and adjust these properties:

• Set InputType to itNumber (this restricts the soft keyboard to numeric input, preventing non-digit characters from being entered)
• Optional: Set Hint to "Enter 16-digit number" to guide users on expected input

Step 2: Add the OnChange Event Handler #

Double-click the Edit control to create an OnChange event, then paste this code:

procedure TForm1.Edit1Change(Sender: TObject);
var
  RawText: string;
  FormattedText: string;
  I: Integer;
  OriginalCursorPos: Integer;
  SpaceCountBeforeCursor: Integer;
begin
  // Prevent recursive trigger of OnChange while updating text
  Edit1.OnChange := nil;
  try
    // Extract only digits from the input
    RawText := '';
    for I := 1 to Length(Edit1.Text) do
    begin
      if Edit1.Text[I] in ['0'..'9'] then
        RawText := RawText + Edit1.Text[I];
    end;

    // Limit input to 16 digits (matches the target format)
    if Length(RawText) > 16 then
      RawText := Copy(RawText, 1, 16);

    // Build formatted string with spaces every 4 digits
    FormattedText := '';
    for I := 1 to Length(RawText) do
    begin
      FormattedText := FormattedText + RawText[I];
      // Add space after every 4th digit, except the last one
      if (I mod 4 = 0) and (I < Length(RawText)) then
        FormattedText := FormattedText + ' ';
    end;

    // Calculate cursor position to maintain user's input focus
    OriginalCursorPos := Edit1.SelStart;
    SpaceCountBeforeCursor := 0;
    // Count how many spaces were present before the original cursor
    if OriginalCursorPos > 0 then
      SpaceCountBeforeCursor := Length(Copy(Edit1.Text, 1, OriginalCursorPos)) - Length(Copy(RawText, 1, OriginalCursorPos - SpaceCountBeforeCursor));
    
    // Adjust cursor for new formatting
    OriginalCursorPos := OriginalCursorPos + (Length(FormattedText) - Length(Edit1.Text));
    if OriginalCursorPos > Length(FormattedText) then
      OriginalCursorPos := Length(FormattedText);

    // Update the Edit's text and restore cursor position
    Edit1.Text := FormattedText;
    Edit1.SelStart := OriginalCursorPos;
  finally
    // Re-enable the OnChange event
    Edit1.OnChange := Edit1Change;
  end;
end;

Key Details Explained #

• Recursion Prevention: We temporarily disable the OnChange event while updating the text to avoid triggering the event repeatedly as we modify the Edit’s content.
• Raw Text Filtering: We strip all non-digit characters first to ensure only numbers are processed, even if non-numeric input somehow gets past the itNumber restriction.
• Cursor Position Maintenance: This is critical for a smooth user experience—we calculate how many spaces were present before the original cursor, then adjust the cursor to stay in the correct relative spot after formatting.

Testing the Behavior #

As users type digits, the Edit will automatically insert spaces after every 4th digit. If they delete characters, the formatting will adjust accordingly (e.g., deleting a digit before a space will remove the space if it’s no longer needed).

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