相关疑难解决方法(0)

我有一个HTML登录表单,其中包含以下元素(按此顺序):

• input type=text (用户名输入)
• input type=password (密码)
• input type=submit (登录按钮)

当焦点在text input？时,为什么Android浏览器在软键盘中显示"Go"按钮而不是"Next"按钮？这会导致用户因为输入用户名后,用户在键盘(通常是正确的动作)按下右下角按钮,表单将用空密码,这显然是行不通的提交失败很容易登录.[如果我的浏览器设置为记住密码并且密码管理器能够填写密码,则此行为将有意义.但是,这不是这种情况,因为您可以在下面测试自己.]

我想让输入类型文本具有"下一步"按钮和输入类型密码(提交前的最后一个输入)以具有"开始"按钮.

问题表单的一个示例位于https://peda.net/:login(此表单包含用于检测输入的"Enter"键的代码,并阻止提交表单,除非最后一个可见表单输入被聚焦).

你知道这个问题的真正解决方法吗？我知道如果我实现本机应用程序,我会使用android:imeOptions="actionNext"(请参阅如何将Android软键盘"Go"按钮更改为"Next").但是,在这种情况下,它是一个HTML表单和Android默认浏览器.

至少在以下配置中可以看到问题:

• 在Android 2.3.4上运行的"浏览器"系统应用程序(Cyanogenmod 7)
• 在Android 4.2.2上运行的"浏览器"系统应用程序(Cyanogenmod 10.1)
• 在Android 4.3.1上运行的"浏览器"系统应用程序(Cyanogenmod 10.2 M1)
• 在Android 4.4.2(Cyanogenmod 11.0 M3)上运行的"浏览器"系统应用程序(AOSP浏览器)
• 在Android 5.5.1(Cyanogenmod 12.1)上运行的"浏览器"系统应用程序(AOSP浏览器)[有箭头图标而不是单词"Go"]
• 在Android 6.0.1(Cyanogenmod 13.0)上运行的"浏览器"系统应用程序(AOSP浏览器)[有一个箭头图标而不是单词"Go"]

Phonegap输入类型文本显示软键盘上的Go按钮,我有多个文本框,所以想要键盘上的Next按钮,这样用户可以轻松移动,最后输入想要Go,这样用户可以按提交表单.

并且在Android kitkatt键盘顶部栏上也没有显示Next | Prev按钮.

我的目标是创建一个表单，当您按回车键时，它会将您切换到下一个输入元素，并在您进行最后一个输入时提交表单。

这是为移动设备构建的，因为在浏览器中没有使用“下一步”按钮而不是“转到键盘”按钮的选项（有关此问题的更多信息，请参阅此答案）。

为了更好地形象化这一点，这里有一张图片：

我也写了一些代码，但这里的重点是我无法在正确的位置捕获事件，因此表单在返回后立即提交或当我阻止事件时，焦点在我点击后发生变化返回2次。

请参阅此处的示例：https : //codepen.io/ofhouse/pen/Rgwzxy（我也粘贴了下面的代码）

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this._onKeyPress = this._onKeyPress.bind(this);
  }

  componentDidMount() {
    if (this.props.focus) {
      this.textInput.focus();
    }
  }

  componentDidUpdate(nextProps) {
    if (nextProps.focus) {
      this.textInput.focus();
    }
  }

  _onKeyPress(e) {
    if (e.key === 'Enter') {
      this.props.onSubmit(e);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onKeyPress={this._onKeyPress}
          ref={input => {
            this.textInput = input;
          }}
        />
      </div>
    );
  }
}

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state …

我从这里得到了代码jquery如何捕获输入键并将事件更改为选项卡

(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            'allowSubmit': false
        }, options);
        this.find('input, select, textarea, button').live("keypress", {localSettings: settings}, function(event) {
            if (settings.allowSubmit) {
                var type = $(this).attr("type");
                if (type == "submit") {
                    return true;
                }
            }
            if (event.keyCode == 13) {
                var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
                var idx = inputs.index(this);
                if (idx == inputs.length - 1) {
                    idx = -1;
                } else {
                    inputs[idx + 1].focus(); // handles submit buttons
                }
                try {
                    inputs[idx + 1].select();
                } …