反应本机文本输入，按下时更改光标位置

Posted 2023-04-18

【中文标题】反应本机文本输入，按下时更改光标位置

【英文标题】：react native textInput, change position of cursor on press

【发布时间】：2020-07-15 18:51:42

【问题描述】：

现在，在我的 react native 应用程序中，我无法更改每个输入的中间值。因为每次我按下文本输入时，插入符号都位于插入字符串的末尾。

例如：

值：123456 ---->我只想删除/更改 23，但我不能，因为插入符号超过了最后一个值。

我尝试使用 selectTextOnFocus，但它只会在我单击其他文本输入时触发，并且如果数据是预填充的，它就不起作用。我试着解释得更好

在下图中，我从第一个文本 Mobile Number 跳转到第二个文本 id RICE。

在下图中，我输入了新值12321，但如果在同一输入上再次按下，文本将不会被选中。我试图点击并停留大约 10 秒，但什么也没有。

我正在使用 xcode 来构建应用程序。

这是我的输入组件

const InputField: React.FC<Props> = (
  
    placeholder,
    iconLeft,
    iconRight,
    dateTimeIcon,
    iconBackground,
    type,
    id,
    style,
    name,
    value,
    keyboardType,
    iconRightFunction,
    maxLength = 100,
    inputBackground,
    onChangeText,
    onChange,
    editable,
    textAlign,
    setMarginBottom,
    onFocus,
    multiline,
    numberOfLines,
    label,
    error,
    errorLabel,
    containerHeight,
    onBlur,
  ,
  ref,
) => 
  const [hidePassword, showOrHidePassword] = useState(true);

  const _handleShowPassword = () => 
    showOrHidePassword(!hidePassword);
  ;

  const _handleOnChange = ( nativeEvent ) => 
    onChange && onChange(name, nativeEvent.text);
  ;

  const _handleOnBlur = () => 
    onBlur && onBlur(name, value);
  ;
  const input = useRef(null);
  const showPassword = type === 'password' && !error && value.length !== 0;
  return (
    <>
      label && (
        <StyledLabelContainer setMargin=setMarginBottom>
          <StyledLabel error=error>label</StyledLabel>
          error && <StyledLabel error=error>errorLabel</StyledLabel>
        </StyledLabelContainer>
      )

      <StyledContainer containerHeight=containerHeight setMargin=setMarginBottom>
        iconLeft && <StyledIconLeft bgColor=iconBackground>iconLeft</StyledIconLeft>
        <TouchableOpacity
          activeOpacity=0
          onPress=() => 
            console.log('inputcurrent', input, input.current);
            input.current.focus();
          
          style= flex: 1 
        >
          <View pointerEvents="none" style= flex: 1 >
            <StyledInput
              style=style
              ref=input
              textAlign=textAlign
              maxLength=maxLength
              editable
              selectTextOnFocus
              clearTextOnFocus=false
              secureTextEntry=type === 'password' && hidePassword
              placeholder=placeholder
              type=type
              autoCapitalize="none"
              onChangeText=onChangeText
              onChange=_handleOnChange
              value=value
              id=id
              name=name
              bgColor=inputBackground
              keyboardType=keyboardType
              blurOnSubmit=true
              onFocus=onFocus
              returnKeyType='done'
              onBlur=_handleOnBlur
              error=error
              multiline=multiline
              numberOfLines=numberOfLines
            />
          </View>
        </TouchableOpacity>

问题

如何在按下操作期间设置光标的正确位置？ 例如：123456 ----> 用户在字符串中间按下，我希望看到数字 3 和 4 之间的插入符号。

我的尝试

我阅读了有关选择的内容，但没有成功实施，非常欢迎各种建议。

感谢您的时间。

【参考方案1】：

您可以使用selection 属性将光标定位到您想要的位置。参见文档：https://reactnative.dev/docs/textinput.html#selection

您可以创建一个看起来像文本输入但实际上是一组小按钮的视图，每个字符一个。当用户单击其中一个按钮时，您就知道他们希望插入符号（光标）在哪里。然后渲染真正的TextInput 并使用selection 道具将插入符号移动到正确的位置。

【讨论】：

感谢这个想法。您如何提出视图和文本输入的布局，因为两者都必须同时对用户可见。

只需一个接一个地渲染多个TextInputs并使用flexDirection: "row"。