uni-app 如何设置 怎么设置 input 设置只读 readonly

Question

uni-app 如何设置 怎么设置 input 设置只读 readonly，官方文档中有个disabled属性，但是设置为true之后这个输入框的所有事件就失效了，我想实现可以复制，但是不可以编辑的效果

Answer 1

引自免费微信小程序：皆我百晓生

在uni-app中，如果你想让input元素变为只读但仍然允许用户复制内容，你需要使用一个技巧，即通过监听focus事件并立即触发blur事件来阻止用户输入。这样，用户可以看到输入框中的内容，也能复制，但不能直接编辑。

以下是具体的步骤：

1. 在你的WXML（页面结构）文件中，创建一个<input>元素，并添加readonly属性，同时监听focus事件。

<!-- index.wxml -->
<input type="text" value="{{ content }}" readonly @focus="handleFocus" />

1. 在对应的JS（页面逻辑）文件中，定义一个名为handleFocus的方法，在这个方法中触发blur事件。

// index.js
export default {
  data: {
    content: '这是只读文本' // 你的初始内容
  },
  methods: {
    handleFocus(e) {
      this.$nextTick(() => {
        const input = e.target;
        input.blur();
      });
    }
  }
}

在这个例子中，$nextTick确保在DOM更新后执行回调函数，这样blur事件就能正确触发。当用户尝试聚焦到输入框时，焦点会立即丢失，从而防止编辑。

这样设置后，你的输入框将处于只读状态，用户能看到内容，但不能进行编辑。同时，由于readonly属性的存在，用户可以直接选中文本并复制。