input readonly 问题

<input type="text" class="custom-select-input" readonly
               :value="selectedProvinceOption + ' / ' + selectedDistrictOption" placeholder="Province / District"
        >

这个代码里 placeholder 不生效 为什么

在 HTML 表单元素中，readonly 属性的作用是让输入框不可编辑，但仍然允许用户选择和复制输入框中的文本。然而，当一个输入框是只读的（即设置了 readonly 属性），placeholder 属性不会被渲染。这是 HTML 标准的一部分。

如果希望在 readonly 状态下仍然显示占位符文本，可以通过一些额外的 CSS 或 JavaScript 来实现。

使用 CSS 和 JavaScript 实现占位符效果

以下是一个示例，展示如何使用 CSS 和 JavaScript 来模拟只读状态下的占位符效果。

示例代码

<template>
  <div>
    <div class="custom-select-wrapper">
      <input type="text" class="custom-select-input" readonly
             :value="displayValue" @focus="showPlaceholder = false" @blur="checkPlaceholder">
      <span class="placeholder" v-if="showPlaceholder">{{ placeholder }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvinceOption: '',
      selectedDistrictOption: '',
      placeholder: 'Province / District',
      showPlaceholder: true,
    };
  },
  computed: {
    displayValue() {
      return this.selectedProvinceOption + ' / ' + this.selectedDistrictOption;
    },
  },
  watch: {
    displayValue(newValue) {
      this.showPlaceholder = newValue.trim() === '';
    },
  },
  methods: {
    checkPlaceholder() {
      this.showPlaceholder = this.displayValue.trim() === '';
    },
  },
};
</script>

<style>
.custom-select-wrapper {
  position: relative;
  display: inline-block;
}

.custom-select-input {
  padding: 10px;
  font-size: 16px;
  width: 200px;
}

.placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  user-select: none;
}
</style>

解释

1. HTML 模板：

   • 使用 div 包裹 input，并在 div 中添加一个 span 来显示占位符。
   • 绑定 input 的 focus 和 blur 事件，以控制占位符的显示和隐藏。

2. Vue 实例数据和计算属性：

   • selectedProvinceOption 和 selectedDistrictOption 存储选择的省份和区县。
   • placeholder 存储占位符文本。
   • showPlaceholder 控制占位符的显示状态。
   • displayValue 计算属性用于生成输入框的显示值，并监控其变化以更新占位符状态。

3. 方法：

   • checkPlaceholder 在 blur 事件时调用，检查输入框是否为空，如果为空则显示占位符。

4. CSS：

   • 通过 position: relative 和 position: absolute 实现占位符文本的定位。
   • 设置 pointer-events: none 和 user-select: none 使占位符文本不可交互。

这种方式确保即使在 readonly 状态下，仍然能够显示占位符文本。