HTML/JS实现输入框前置固定前缀及类Tkinter只读下拉框

Hey there! Let's tackle these two form issues you're facing as an HTML/JS newbie—super common stuff, so no worries 😊

To create a phone input with a non-editable +44 prefix, we can wrap the prefix and input field in a container to make them look like a single cohesive input. Here's how to do it:

HTML #

<div class="phone-input-container">
  <span class="prefix">+44</span>
  <input type="tel" id="uk-phone" placeholder="Enter phone number (no leading 0)" />
</div>

CSS #

.phone-input-container {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.prefix {
  padding: 8px 10px;
  background-color: #f5f5f5;
  border-right: 1px solid #ccc;
  user-select: none; /* Prevent users from selecting/editing the prefix */
}
#uk-phone {
  border: none;
  padding: 8px 10px;
  outline: none;
}

JavaScript #

const phoneInput = document.getElementById('uk-phone');
phoneInput.addEventListener('input', function(e) {
  // Only allow numeric characters
  this.value = this.value.replace(/\D/g, '');
});

This setup keeps the +44 fixed and uneditable, restricts input to numbers only, and visually acts like a single input field. Note: UK phone numbers typically drop the leading 0 when using +44, so the placeholder reminds users of that.

We have two solid options here—one using HTML5's <datalist> (quick and simple) and a custom dropdown (more flexible for styling).

Option 1: Using HTML5 Datalist #

By default, a readonly input won't trigger the datalist dropdown, but a tiny JS hack fixes that:

HTML #

<input type="text" id="age-select" readonly placeholder="Select age" list="age-options" />
<datalist id="age-options">
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <!-- Add more ages as needed -->
</datalist>

JavaScript #

const ageInput = document.getElementById('age-select');

// Trigger dropdown on click by temporarily removing readonly
ageInput.addEventListener('click', function() {
  this.removeAttribute('readonly');
  setTimeout(() => this.setAttribute('readonly', true), 0);
  this.focus();
});

// Keep input readonly after selection
ageInput.addEventListener('change', function() {
  this.setAttribute('readonly', true);
});

Option 2: Custom Dropdown (Full Control Over Style) #

This gives you complete control over how the dropdown looks and behaves, just like a Tkinter combobox:

HTML #

<div class="custom-combobox">
  <input type="text" id="custom-age" readonly placeholder="Select age" />
  <ul class="dropdown-options" id="age-dropdown">
    <li data-value="18">18</li>
    <li data-value="19">19</li>
    <li data-value="20">20</li>
    <li data-value="21">21</li>
    <!-- Add more ages here -->
  </ul>
</div>

CSS #

.custom-combobox {
  position: relative;
  display: inline-block;
}
#custom-age {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 150px;
  cursor: pointer; /* Let users know it's clickable */
}
.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: white;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}
.dropdown-options li {
  padding: 8px 10px;
  cursor: pointer;
}
.dropdown-options li:hover {
  background-color: #f5f5f5;
}

JavaScript #

const customAgeInput = document.getElementById('custom-age');
const ageDropdown = document.getElementById('age-dropdown');
const dropdownItems = ageDropdown.querySelectorAll('li');

// Toggle dropdown visibility on input click
customAgeInput.addEventListener('click', function() {
  ageDropdown.style.display = ageDropdown.style.display === 'block' ? 'none' : 'block';
});

// Fill input with selected value and hide dropdown
dropdownItems.forEach(item => {
  item.addEventListener('click', function() {
    customAgeInput.value = this.dataset.value;
    ageDropdown.style.display = 'none';
  });
});

// Close dropdown when clicking outside the combobox
document.addEventListener('click', function(e) {
  if (!e.target.closest('.custom-combobox')) {
    ageDropdown.style.display = 'none';
  }
});

This custom version lets you style every part of the combobox and ensures the input stays readonly—users can only select values from the dropdown.

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