TextInput设置editable={false}时如何启用文本选择功能

完全可以实现，editable={false}默认会联动关闭组件的文本选中交互，只要手动覆盖这个默认联动逻辑就能达到目标，不同开发环境下的适配方案如下：

不同场景的实现代码 #

• React Native 移动端最简便方案
  直接在设置editable={false}的同时，显式传入selectable={true}属性即可，这个属性的优先级高于editable联动的默认禁用规则，在RN 0.57及以上的iOS、Android全版本兼容：

  <TextInput
    value="支持选中复制的只读文本"
    editable={false}
    selectable={true} // 核心配置，强制开启文本选中能力
    multiline
  />
  

  这个配置下组件不会弹出系统键盘，也不会响应任何输入修改，同时支持长按选中文本、调出复制菜单的完整交互。如果是单行文本的输入框，不需要额外加multiline属性。
• 低版本RN兼容方案
  如果遇到老版本RN中，editable={false}下显式设置selectable={true}不生效的问题，可以用伪只读的方式绕开editable的禁用逻辑：
  不依赖editable={false}做输入拦截，转而在焦点和变更事件上做拦截，让组件呈现完全不可编辑的状态，同时保留原有的文本选中能力：

  <TextInput
    value="支持选中复制的只读文本"
    selectable={true}
    onFocus={(e) => e.currentTarget.blur()} // 拿到焦点立刻收回，阻止键盘弹出
    onChangeText={() => {}} // 拦截所有输入文本变更，保证值不被修改
    multiline
  />
  

  这个方案的小缺点是低概率出现点击瞬间的焦点闪烁，适合版本迭代空间有限的老项目。
• Web端React DOM适配方案
  浏览器环境下不要用editable={false}（本质会给原生输入框加上disabled属性），改用readOnly属性做只读控制：readOnly可以完全禁止用户修改输入内容，同时完整保留文本选中、复制的交互，没有额外的兼容问题。

  <TextInput
    value="支持选中复制的只读文本"
    readOnly // 替代editable={false}实现只读效果
  />
  

常见踩坑提醒 #

iOS端如果配置完上述属性后，选中文本时的复制菜单无法弹出，大概率是外层父组件的触摸事件拦截逻辑吃掉了长按选中的交互，只需要移除触摸事件中阻止默认行为的代码，或者给外层View补充selectable={true}的兼容设置即可恢复正常。

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