在 iOS React text/number 输入卡住，强制用户输入 phone 数字

Question

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

组件：

Search > 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 })
}

搜索选择

<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 (Or https://dev.moon.holdings）（点击 + select 一项资产，然后聚合然后尝试进入位置。

但是在移动设备上，它只允许我输入一个实际的 phone 数字，并且打字不会改变输入:(

更新

好像是iPhone的问题，我的Android的朋友可以加仓，我的iPhone的不行。奇怪....

更新

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

Answer 1

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

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

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

覆盖

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

在 iOS React text/number 输入卡住，强制用户输入 phone 数字

On iOS React text/number input is stuck forcing user to enter in phone number

javascript

input

mobile-safari

ios

reactjs

更新

更新