How to statically display units (like 'min') in an input box and allow only numeric input

This article describes how to only allow users to enter numbers (such as minutes) in the input box, while visually fixing the unit (such as "min") to the right and making it uneditable and unselectable, taking into account both user experience and data accuracy.

In form design, it is often necessary to allow users to input values ​​with units (such as "5 min" or "30 sec"). However, if the unit is written directly into the value attribute of (such as value="0 min"), the unit will be selected, deleted, or overwritten by the cursor, destroying semantics and interaction logic. The truly robust solution is to separate "editable values" and "static unit display", and achieve visual integration through HTML structure and CSS styles.

✅ Recommended solution: Semantic structure style fusion

Use to manage pure numeric input, use next to the display unit, and then use CSS to achieve seamless splicing:

 <div class="input-with-unit">
  <input type="number" id="time" min="0" max="99" value="0" step="1" aria-label="Minutes">
  <span class="unit">min</span>
</div>

Supporting CSS (eliminate browser default styles and unify vision):

 .input-with-unit {
  display: inline-flex;
  align-items: center;
  font-family: system-ui, -apple-system, sans-serif;
}

.input-with-unit input {
  margin: 0;
  padding: 6px 8px 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
  font-size: 1rem;
}

/* Hide the up and down arrows of Chrome/Safari/Edge*/
.input-with-unit input::-webkit-outer-spin-button,
.input-with-unit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox compatible: displayed as text box style*/
.input-with-unit input[type="number"] {
  -moz-appearance: textfield;
}

.input-with-unit .unit {
  padding: 6px 12px 6px 4px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 4px 4px 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1;
}

✅Advantage description :

• Values ​​are natively constrained by min/max/step and do not require JavaScript verification;
• The unit is completely uneditable, unselectable, and accessibility-friendly (aria-label has clear semantics);
• Responsive and friendly, supports keyboard navigation and screen readers;
• Compatible with all modern browsers, no risk of hacks.

⚠️ Comparison of alternatives (not recommended)

• maxlength="2" : Although it can limit the length, it cannot prevent the input of letters (such as "ab"). It still requires the cooperation of JS or pattern, and its semantics is weaker than number;
• CSS::after pseudo-element coverage unit : The unit is not a real DOM node and cannot be recognized by screen readers, and the cursor may mistakenly enter the pseudo-element area, affecting accessibility;
• value="0 min" JS prevents the cursor from entering the suffix : the logic is complex, prone to bugs, and violates the single responsibility principle of form controls.

?Advanced tips

• If you need to support decimals (such as 1.5 min), you can set step="0.1" and adjust max (such as max="99.9");
• It is recommended to add inputmode="numeric" on the mobile terminal to improve the soft keyboard experience:

   <input type="number" inputmode="numeric" ...>

• If you need dynamic units (such as "min"/"sec" switching), you only need JS to control the .unit text content without affecting the input logic.

To sum up, "structural separation and style integration" is the most practical method that conforms to Web standards, has strong maintainability and good user experience - let numbers belong to numbers, units belong to units, each performs its duties, and is integrated.

The above is the detailed content of How to statically display units (like 'min') in an input box and allow only numeric input. For more information, please follow other related articles on the PHP Chinese website!