在iOS React文本/数字输入卡住，强制用户输入电话号码

Question

在我的React / NextJS应用程序中，我有这个简单的输入：

组件：

搜索> SearchSelect> ExchangeInfo.tsx：

Search.tsx

<SearchSelect
  assets={assets}
  selected={selected}
  exchange={exchange}
  exchanges={exchanges}
  fetching={fetching}
  aggregate={aggregate}
  checkAggregate={this.handleCheckAggregate}
  enterPosition={this.handleEnterPosition}
  exchangeSelect={this.handleExchangeSelect}
/>

//... the function:

@bind
handleEnterPosition(position: number) {
  this.setState({ position })
}

SearchSelect

<SearchExchanges
  selected={selected}
  exchange={exchange}
  exchanges={exchanges}
  checkAggregate={checkAggregate}
  aggregate={aggregate}
  enterPosition={this.props.enterPosition}
  exchangeSelect={this.props.exchangeSelect}
/>

ExchangeInfo

import React from 'react'
import { bind } from 'decko'

import { IAsset, IMarketAsset } from '../../shared/types'
import { EnterPositionStyle } from '../../styles'

interface IPropsInfo {
  asset: IAsset
}

interface IPropsCount {
  exchanges: IMarketAsset[]
}

interface IPropsPosition {
  asset: IAsset
  enterPosition(position: number): void
}

export const ExchangeSelectInfo = (props: IPropsInfo) =>
  <h2>Exchanges with <span>{props.asset.currency}</span> denominated in BTC, ETH, USD, USDC, or USDT will be listed above. Otherwise the asset's price will be an aggregate of supported exchanges.</h2>

export const ExchangesCount = (props: IPropsCount) => {
  const { exchanges } = props
  const pural = exchanges.length > 1 && 's'
  return (<option key={'default'}>({exchanges.length}) Exchange{pural}:</option>)
}

export class EnterPosition extends React.Component<IPropsPosition> {
  render() {
    const { asset } = this.props
    return (
      <EnterPositionStyle>
        <h2>Enter your <span>{asset.currency}</span> position in order to add asset to your Portfolio. Or add the asset to your Watchlist.</h2>
        <input type="number" placeholder="Enter Position" onChange={this.handleChange} />
      </EnterPositionStyle>
    )
  }

  @bind
  private handleChange(event: React.FormEvent<HTMLInputElement>) {
    const target = event.target as HTMLInputElement
    const parsed = parseFloat(target.value)
    const position = Number.isNaN(parsed) ? 0 : parsed
    console.log('target.value', target.value);
    this.props.enterPosition(position)
  }
}

它适用于网络罚款：https://moon.holdings（或https://dev.moon.holdings）（点击+选择一个资产，然后聚合然后尝试进入位置。

但是在移动设备上它只允许我输入一个实际的电话号码，输入不会改变输入:(

UPDATE

似乎这是一个iPhone问题，我的Android好友可以添加位置，但不是我的iPhone。奇怪....

UPDATE

我添加了一个输入到根组件/容器，它的工作原理......似乎问题是我正在使用的输入是嵌入3个组件。或者与此相关的事情。

Answer 1

信不信由你，这是一个CSS问题。看到你的页面，你有这些css输入导致safari问题。

user-select: none;
-webkit-user-select: none;

删除它们，您的输入将恢复工作。如果您在删除它们时遇到困难，请覆盖

-webkit-user-select: text;
user-select: text;