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

Question

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

组件:

Search > SearchSelect > ExchangeInfo.tsx:

搜索.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 })
}

搜索选择

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

交换信息

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 )(点击 + 选择 Assets ，然后聚合，然后尝试入场。

但是在手机上它只允许我输入一个实际的电话号码，并且打字不会改变输入:(

更新

似乎是 iPhone 的问题，我的 Android friend 可以添加位置，但我的 iPhone 不行。奇怪....

更新

我向根组件/容器添加了一个输入，它可以正常工作……问题似乎是我正在使用的输入嵌入了 3 个组件。或者与之相关的东西。

Answer 1

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

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

删除它们，您的输入将恢复工作。如果您难以删除它们，请覆盖

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