如何在Android中顯示用於密碼字段的數字軟鍵盤

我正在使用PhoneGap進行Android的移動項目，並使用Samsung Galaxy S2 Skyrocket，android版本4.0.4進行測試。現在我有一個只能接受數字密碼的html輸入字段，所以我首先設置這樣的輸入

<input type="password" id="Password"/>
它給了我在Android的字母鍵盤，但我想顯示的鍵盤是數字。

所以我改變我的代碼是
<input type="tel" id="Password"/>並使用CSS來掩蓋密碼
如何在Android中顯示用於密碼字段的數字軟鍵盤

<style type="text/css"> 
     #Password { 
      -webkit-text-security: disc; 
     } 
</style>

但掩蔽工作不一樣的類型=「密碼」，它會掩蓋密碼當密碼框沒有得到重點。如果焦點集中，密碼將不會被光盤屏蔽，因此會顯示。

是否有任何方法可以讓數字鍵盤顯示並讓密碼始終被屏蔽？

謝謝。

來源

2013-03-06 Jerry Wu

你的代碼是缺少 – Whizkid747 2013-03-06 20:17:58

對不起Whizkid747，這是我第一次發佈一個問題，所以我發佈這個問題以保存目的，現在已經完成。 – 2013-03-06 20:30:19

#Password input [type = number] { -webkit-text-security：disc; } – Whizkid747 2013-03-06 22:51:16

我得到這個固定

密碼輸入標籤是像這樣

<div id="passwordCell" style="display:inline;"> 
    <input type="password" pattern="[0-9]*" name="Password" id="Password" placeholder="4 digit numeric only allowed" maxlength="4"/> 
</div>

一個div所以，我解決了以下步驟的問題：

添加其他輸入字段放在#passwordCell div中，並給它一個id，例如，password_mask <input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>
隱藏#password口令輸入字段
$("#Password").hide();
綁定一個jQuery keyup事件到#password_mask輸入字段使它通過其inputed值#password口令字段，並將其替換在輸入的字符在#password_mask *。
我這樣做是因爲在年底#password口令值將被髮送到服務器的用戶的密碼

這裏的javascript代碼，我用jQuery的

$("#passwordCell").html(''); 
$("#passwordCell").append('<input type="tel" name="password_mask" id="password_mask" placeholder="4 digit numeric only allowed." maxlength="4"/>' + 
          '<input type="password" pattern="[0-9]*" name="Password" id="Password" placeholder="4 digit numeric only allowed" maxlength="4" data-validation-required="true" data-validation-pattern="pin not_empty"/>'); 
$("#password_mask").textinput(); 
$("#Password").textinput(); 
//$("#password_mask").show(); 
$("#Password").hide(); 
$("#password_mask").keyup(function() { 
    var inputLength = $(this).val().length; 
    var passwordLength = $("#Password").val().length; 
    if (inputLength > passwordLength) { 
     var inputLastChar = $(this).val().charAt(inputLength-1); 
     $("#Password").val($("#Password").val() + inputLastChar); 
    } else { 
     $("#Password").val($("#Password").val().substring(0, $(this).val().length)); 
    } 

    var i = 0; 
    var maskPassword = ""; 
    while (i < $("#password_mask").val().length) { 
     maskPassword += "*"; 
     i++; 
    } 
    $("#password_mask").val(maskPassword); 
}); 
$("#password_mask").blur(function() { 
    $("#Password").focus(); 
    $("#Password").blur(); 
});

來源

2013-07-25 21:10:11

如何在Android中顯示用於密碼字段的數字軟鍵盤

回答

相關問題