设置 input 标签只读样式

可以通过设置 input 标签的属性 readonly="true" 或者设置 disabled="true" 来设置只读样式。

例如：

<input type="text" value="只读文本" readonly="true">
<input type="text" value="只读文本" disabled="true">

其中 readonly 属性表示该输入框只读，无法编辑，但是可以选择、复制、粘贴等操作。disabled 属性表示该输入框被禁用，不可编辑，也无法进行其他操作。两者的区别在于只读输入框可以被提交，而禁用输入框不会被提交。

相关问题

input 标签只读样式

可以使用 CSS 的属性 `pointer-events` 和 `background-color` 来实现 `input` 标签只读样式，具体如下：

input[readonly] {
  pointer-events: none;
  background-color: #f7f7f7;
}

解释：

- `input[readonly]` 表示选中所有 `input` 标签中 `readonly` 属性存在的元素
- `pointer-events: none;` 表示禁用鼠标事件，即不允许用户点击或选择输入框
- `background-color: #f7f7f7;` 表示设置背景颜色为灰色，使用户可以区分出只读和可编辑状态的输入框

uniapp input输入框只读

### 如何在 UniApp 中将 Input 输入框设置为只读

为了使 `input` 组件变为只读，在 UniApp 中可以利用原生 HTML 的 `readonly` 属性来实现这一功能[^1]。对于 Vue.js 驱动的应用程序而言，还可以通过绑定动态属性的方式控制组件的状态。

#### 使用静态方式定义只读输入框
可以直接在模板内的 `<input>` 或者 `<uni-input>` 标签上添加 `readonly` 属性：

<template>
  <view class="example">
    <!-- 下面的例子展示了如何创建一个默认状态下不可编辑的文本框 -->
    <input type="text" placeholder="这是一个只读字段" readonly />
    
    <!-- 如果使用的是 uni-app 提供的封装好的 input 组件，则应这样写 -->
    <uni-easyinput v-model="value" placeholder="这也是个只读域" readonly></uni-easyinput>
  </view>
</template>

#### 动态切换只读模式
如果希望能够在运行期间改变输入框是否可编辑的情况，可以通过数据绑定的方式来管理这个特性。下面是一个简单的例子说明怎样做到这一点：

<script setup lang="ts">
import { ref } from 'vue';

// 定义变量用于存储当前输入框的状态以及内容
let inputValue = ref('');
let isReadOnly = ref(true);

function toggleReadonlyStatus(){
  // 切换只读状态
  isReadOnly.value = !isReadOnly.value;
}
</script>

<template>
  <view>
    <button @click="toggleReadonlyStatus">点击切换只读/可编辑</button><br/>
    <input :readonly="isReadOnly" v-model="inputValue"/>
  </view>
</template>

此方法允许开发者基于应用程序逻辑灵活调整控件的行为，而无需手动操作 DOM 元素。

关于样式方面，虽然设置了 `readonly` 后浏览器通常会自动应用一些视觉提示（比如浅灰色背景），但如果想要自定义外观，也可以借助 CSS 来完成特定的设计需求[^5]。