使用phonegap处理android go按钮

Question

我正在使用 HTML5 和 PhoneGap。目前面临一个问题；我无法处理 Android 软键盘的 GO 按钮。 我的功能是这样的；我有一个登录按钮，当我输入密码并单击键盘的 GO 按钮时，它将在我的页面中处理与提交按钮相同的功能。就像在屏幕截图中一样

有什么解决办法吗？？当尝试像我最新的代码事件正在工作但 jQUERY AJAX 调用不起作用时。 :(

.. HTML 代码..

  <div data-role="page" id="page_login">
  <div data-role="header" id="header_login">
  <img src="images/loginheaderlogo.png" id="login_header_logo"><br/>
  <img src="images/loginheaderarrow.png" id="login_header_arrow">
  </div>
    <div data-role="content" id="content_login" class="max_width scrolling">
    <form onsubmit="userLogin()"> <!--form submit-->
    <div id="login_textbox_container">
    <span class="valid" id="username_valid"></span>
    <img src="images/loginusericon.png" id="login_text_icon">
    <label class="input">
    <span>Username</span>
    <input type="text" id="input_usersername">
    </label>
    </div>
    <div id="login_textbox_container"><span class="valid" id="password_valid"></span>
    <img src="images/loginpassicon.png" id="login_text_icon">
    <label class="input">
    <span>Password</span>
    <input type="number" id="input_password">
    </label>
    </div>
    <div style="text-align:center; margin-top:37px">
    <div class="main_button"  id="login_button">
    <div class="left"></div>
    <div class="center">LOGIN</div>
    <div class="right"></div>
    </div> 
    <input type="submit" value="Login" id="btnSubmit" data-role="none"/>                    
    </div>
    </form>
    </div>
    </div>         

..JS代码..

    $("#login_button").on( 'click', function(event) {
    userLogin();
    });

.. Ajax 调用 ..

    function userLogin() {
  var varData = 'username='+$('#input_usersername').val()+'&password='+$('#input_password').val();
var Validation_result = UserLogin_Validation()
if(Validation_result == true) {
$(".pre_loader").show();
setTimeout (function(){
$.ajax({
    type: "POST",
    url: 'http://xxx.xx.net/authenticate.php',
    data: varData,
    dataType: "json",
    crossDomain: true,
    cache: false,
    async: false,
    success: function (data) {
        userToken=data.token;
        localStorage.removeItem("TOKEN");
        localStorage.setItem("TOKEN",userToken);
        if(userToken!=0)
        {
            var query=[$('#input_usersername').val(),$('#input_password').val(),userToken,timeStamp];

            obj.insertLogin(query);
        }
        else
        {
            alert('Invalid User')
            $(".pre_loader").hide();
        }
    },
    error: OnError
});
},1000);}
    }

Answer 1

我假设“开始”按钮仅适用于提交forms。

我在您的 html 中没有看到表单。

<form onsubmit="userLogin()">
    <label>username</label>
    <input type="text" name="username" />
    <label>password</label>
    <input type="password" name="password" />
    <input type="submit" value= "submit">submit my form</form>
</form>

---

编辑

我有一个工作示例：http://jsbin.com/IgeHUdEz/edit 我已经对 HTML 进行了一些剥离，但请注意您应该如何使用带有 for 属性的标签。

HTML

<div data-role="page" id="page_login">
    <form id="loginform" name="login"> <!--form submit-->
        <label class="input" for="input_usersername">
            <span>Username</span>
        </label>
        <input type="text" id="input_usersername">
        <label class="input" for="input_password">
            <span>Password</span>
        </label>
        <input type="number" id="input_password">
        <div style="text-align:center; margin-top:37px">
            <div class="main_button"  id="login_button"> 
                <input type="submit" value="Login" id="btnSubmit" data-role="none"/>
            </div>
        </div>
    </form>                   
</div>

Javascript

$("#loginform").on( 'submit', function(event) {
  userLogin();
});

function userLogin() {
  alert($('#input_usersername').val() + " - " + $('#input_password').val());
}

Answer 2

对于未来的读者，如果您不想使用表单，请替代答案。

document.addEventListener('deviceready', function () {
    document.getElementById('pwd').addEventListener('keypress',CheckKeyPress);
};

CheckKeyPress = function(e)
{
    if (e.keyCode == 13)
    {
        userLogin(); 
    }
}