Question

参考图片： phone screenshot with descriptive arrows

问题：我有一个包含4个输入字段和一个文本区域的表单。在移动设备上，如果我点击任意输入字段，则“焦点”将移到最上方的字段（名称字段）。可以使用出现在键盘上方的箭头从最上方的字段访问其他输入字段。但是，我担心这对最有可能的听众来说是不直观的。

问题：我想知道是否有一种方法可以禁用此行为？或者至少使输入的字段是键盘键入的输入字段？感谢您的尝试：）

注意：签出时，我正在使用Iphone。该网站使用媒体查询，但这是最小的宽度，因此我不相信我所做的任何事情。

HTML（反应-JSX）：

<form className="contact-message-form" onSubmit={this.handleSubmit}>
  <label>
    <input type="text" name="name" value={.} onChange={.} placeholder="Name"/><br/>
    <input type="text" .../><br/>
    <input type="text" ..."/><br/>
    <input type="text" ..."/><br/>
    <textarea cols={.} rows={.} spellcheck="true" className="message" name="message"  value={.} onChange={.} placeholder="Message..."/>
  </label>
  <br/>
  <input type="submit" value="Send Message" disabled={this.state.pressed}/>
</form>

CSS：

.contact-message-form > label > input:not(:last-child) {
  width: 50%;
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 2px;
  text-align: center;
  font: 400 18px/1.8 "Lato", sans-serif;}

.message {
  width: 80%;
  height: 200px;
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 2px;
  text-align: center;
  font: 400 18px/1.8 "Lato", sans-serif;
  text-overflow: ellipsis;}

输入字段重点放在移动设备上，而不关注轻拍输入

0 个答案: