如何实现单个输入框输入内容大写且不影响标题格式占位符？

Got it, let's fix this so you only target that one specific input instead of all fields on your page. Here's a step-by-step approach that handles both the placeholder styling and ensures the input value is actually uppercase (not just visually):

Step 1: Add a Unique Class to Your Target Input #

First, give the passport input a custom class so we can style it exclusively. This is the key to avoiding the global effect you ran into before:

<input type="text" class="passport-input" placeholder="please enter your passport number">

Step 2: CSS for Title Case Placeholder & Uppercase Display #

Use CSS to target only this class. We'll make the placeholder title case and the input text appear uppercase:

/* Make the input text display as uppercase */
.passport-input {
  text-transform: uppercase;
}

/* Style the placeholder to use title case */
.passport-input::placeholder {
  text-transform: capitalize;
}

Quick note: The capitalize property will automatically capitalize the first letter of each word, matching your example of "Please Enter Your Passport Number".

Step 3: Ensure the Actual Input Value is Uppercase (Critical for Submission) #

The CSS above only changes how the text looks—if a user types lowercase letters, the actual value sent with the form will still be lowercase. To fix this, add a tiny JavaScript snippet to convert the value to uppercase as the user types:

// Grab the specific input element
const passportInput = document.querySelector('.passport-input');

// Convert input value to uppercase on every keystroke
passportInput.addEventListener('input', function() {
  this.value = this.value.toUpperCase();
});

Why This Works #

• The custom class isolates our styles and script to just the passport input, no more unintended global changes.
• CSS handles the visual presentation (placeholder styling and uppercase display).
• JavaScript ensures the actual input value is uppercase, which is essential for any backend validation or processing that expects uppercase characters.

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