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

Question

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

成分：

搜索 > 搜索选择 > 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）（单击 + 选择资产，然后聚合，然后尝试进入位置。

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

更新

好像是 iPhone 的问题，我的 Android 朋友可以添加职位，但我的 iPhone 不能。奇怪的....

更新

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

标签： javascriptiosreactjsinputmobile-safari

Answer 1

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

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

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

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