从数据库获取的格式化社保号在Number类型输入框中已赋值但前端不显示的问题求助

I’ve run into this exact issue before—let’s break down what’s happening and fix it quickly.

The Root Cause #

Your input uses type="number", which only accepts pure numeric values (digits 0-9, plus optional decimal points or +/- signs). When you set the value to "123-45-6789", the browser sees the hyphens as invalid for a number input. Even though the value attribute appears in the Elements panel, the browser ignores it when rendering the input’s visible content, leaving it empty.

Simple Solutions #

1. Switch to type="text" with Format Validation (Recommended) #

Since SSNs are formatted identifiers (not actual numbers you’d perform math on), using a text input makes far more sense. You can add a pattern attribute to enforce the correct SSN format, so users can’t submit invalid entries:

<div class="col-md-3">
  <h5>Social Security #: <span class="text-danger">*</span></h5>
  <div class="controls">
    <div id="show-create">
      <input type="text" 
             id="social-security" 
             name="social-security" 
             class="form-control" 
             value="123-45-6789"
             pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}"
             title="Please enter a valid SSN (format: 123-45-6789)">
    </div>
  </div>
</div>

This change will:

• Make the formatted SSN appear immediately in the input
• Trigger browser-native validation if the user enters an invalid format
• Work consistently across all browsers

2. Keep Numeric Keyboard for Mobile (Optional) #

If you want mobile users to see a numeric keyboard (for easier input), add the inputmode="numeric" attribute to the text input. This keeps the formatted value visible while optimizing mobile usability:

<input type="text" 
       id="social-security" 
       name="social-security" 
       class="form-control" 
       value="123-45-6789"
       pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}"
       title="Please enter a valid SSN (format: 123-45-6789)"
       inputmode="numeric">

Why Avoid type="number" for SSNs? #

Using type="number" for SSNs is a common anti-pattern because:

• It doesn’t support formatting characters like hyphens
• It allows invalid values (e.g., leading zeros get stripped, or users can enter numbers longer/shorter than 9 digits)
• SSNs aren’t numeric values you’d calculate with, so the number type provides no practical benefit

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