密码软键盘js

密码软键盘JS基础概念

密码软键盘是一种通过JavaScript实现的虚拟键盘，主要用于用户在网页上输入密码时提供额外的安全层。它通常用于防止键盘记录器（Keylogger）等恶意软件窃取用户的敏感信息。

类型

固定位置软键盘：按键位置固定，用户每次点击时按键会随机变化。
动态位置软键盘：按键位置每次输入时都会重新排列，增加安全性。

应用场景

网上银行：保护用户的账户信息和交易密码。
支付平台：确保用户在输入支付密码时的安全。
企业内部系统：防止内部数据泄露。

示例代码

以下是一个简单的密码软键盘的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Soft Keyboard</title>
    <style>
        #keyboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 20px;
        }
        .key {
            padding: 20px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" id="password" readonly>
    <div id="keyboard">
        <div class="key" onclick="addCharacter('1')">1</div>
        <div class="key" onclick="addCharacter('2')">2</div>
        <div class="key" onclick="addCharacter('3')">3</div>
        <div class="key" onclick="addCharacter('4')">4</div>
        <div class="key" onclick="addCharacter('5')">5</div>
        <div class="key" onclick="addCharacter('6')">6</div>
        <div class="key" onclick="addCharacter('7')">7</div>
        <div class="key" onclick="addCharacter('8')">8</div>
        <div class="key" onclick="addCharacter('9')">9</div>
        <div class="key" onclick="addCharacter('*')">*</div>
        <div class="key" onclick="addCharacter('0')">0</div>
        <div class="key" onclick="addCharacter('#')">#</div>
    </div>

    <script>
        function addCharacter(char) {
            const passwordInput = document.getElementById('password');
            passwordInput.value += char;
        }
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：软键盘按键位置固定，安全性不足

原因：固定的按键位置容易被键盘记录器预测。

解决方法：实现动态位置软键盘，每次输入时重新排列按键位置。

function shuffleKeys() {
    const keyboard = document.getElementById('keyboard');
    const keys = Array.from(keyboard.children);
    for (let i = keys.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [keys[i].style.order, keys[j].style.order] = [keys[j].style.order, keys[i].style.order];
    }
}

// 在每次输入前调用shuffleKeys函数
function addCharacter(char) {
    shuffleKeys();
    const passwordInput = document.getElementById('password');
    passwordInput.value += char;
}

问题2：用户体验不佳，按键响应慢

原因：可能是由于JavaScript执行效率低或网络延迟。

解决方法：优化JavaScript代码，减少不必要的DOM操作；确保服务器响应迅速。

通过以上方法，可以有效提升密码软键盘的安全性和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

如何在打开stkeyboard时向上移动我的edittext

、、

如果我在编辑文本(用户名、密码)等中插入一些文本，则可以看到软键盘。但它出现在我的密码字段视图中。因此密码字段上半部分是可见的，而下半部分则不是因为软键盘。我希望当软键盘可见时，密码字段向上移动一点，以便整个edittext都可见。谢谢

浏览 0提问于2011-08-30得票数 0

回答已采纳

1回答

在Kindle fire上，IME_ACTION_DONE无法正常工作

、、

我在布局中有两个editText，当我输入用户名时，软键盘显示“下一步”按钮，当我输入密码时，软键盘显示“完成”，.It在除“Kindle Fire”设备之外的所有设备上都工作正常。在Kindle Fire上，当输入密码时，软键盘不显示“完成”按钮。如何在kindle fire设备上显示“完成”按钮？有没有办法解决这个问题？感谢进阶！

浏览 2提问于2013-06-03得票数 1

回答已采纳

1回答

当进入完成按钮时，Android会保持软键盘显示

、

我正在开发一个Android应用程序，需要用户输入密码。当用户按下done或enter按钮时，软键盘将消失。当密码错误时，我希望软键盘仍然在屏幕上不抖动。因此，问题是，即使用户按下enter按钮，我如何使软键盘始终显示在屏幕上？

浏览 2提问于2016-12-05得票数 0

2回答

Textfield (密码字段)在触摸外部时会获得焦点。

、、、

一旦用户输入数据并点击登录按钮，密码字段将获得焦点并显示软键盘。有人能帮我阻止密码字段获得焦点吗？或者至少防止显示软键盘。我使用的是森查触摸2.2.1和phonegap 2.9。

浏览 2提问于2014-02-20得票数 0

回答已采纳

2回答

我们有一个Windows应用商店应用，需要输入用户名和密码才能访问服务。当身份验证连接到服务失败时，我们会显示一个弹出窗口，要求重新输入他们的用户名和密码。在平板电脑上，当用户将焦点放在用户名或密码字段上时，软键盘会正确显示。我们的登录屏幕在检测到软键盘时进行了调整，以便所有字段和按钮都可见。但是，由于某些原因，我无法确定用户是否将焦点放在用户名文本框上，然后点击登录按钮，软键盘并未隐藏。弹出窗口被关闭，应用程序继续运行，但仍显示软键盘。如果焦点在密码

浏览 1提问于2013-02-21得票数 2

1回答

单击因软键盘启用而未执行的操作(隐藏键盘也不工作)，但测试已通过

我尝试使用以下功能登录我的帐户Appium版本- 1.71selenium-独立服务器-3.52.0请让我知道为什么行动没有执行。

浏览 2提问于2017-12-22得票数 0

回答已采纳

1回答

安卓:使用WebView.loadUrl加载JavaScript，但保留软键盘

、、、

当用户点击WebView中的(html) Textfield时，将显示软键盘。但是当我用WebView.loadUrl()加载一些JS时，软键盘就消失了。有没有其他加载JS的方法？我还试着手动操作键盘。但是也有太多的缺点。确定是否显示键盘很复杂。问:如何在不影响软键盘的情况下将JS加载到WebView中？

浏览 2提问于2011-10-28得票数 7

1回答

EditText:如何为电子邮件/密码启用自动提示

、

我想要实现的是自动填写用户电子邮件或密码从软键盘，如果他是键入密码到EditText。但出于某种原因，软键盘并没有建议我从保存的密码中粘贴密码。或者建议从保存的邮件中发送电子邮件。

浏览 12提问于2022-11-08得票数 0

1回答

Android应用程序

每当我登录到应用程序时，我需要输入password.But，当我输入密码时，它会通过android的软键盘显示完整的密码。

浏览 2提问于2011-03-01得票数 1

1回答

Android -禁用密码提示

如何在Android应用程序中使用软键盘时禁用密码提示？

浏览 1提问于2011-03-01得票数 2

1回答

使用javascript或原生HTML控制iOs和Android软键盘

、、、

有没有办法用Javascript或HTML在iOs和Android上控制软键盘？我的问题是，当iOs和Android用户聚焦输入时，我必须删除按钮“返回，打开和”下一步“。

浏览 11提问于2014-01-30得票数 0

9回答

Android:如何在编辑文本中设置密码属性？

、

我需要创建一个登录表单与‘用户名’‘密码’字段和两个按钮‘登录’和‘取消’在我的android应用程序。 login_alert.addView(Password);有人能给出一个解决方案吗？

浏览 2提问于2011-05-23得票数 50

回答已采纳

2回答

如何在iPad中隐藏软键盘

、、

有两个用于用户名和密码的文本字段以及两个用于登录和创建帐户的按钮但软键盘并没有消失。请帮帮忙

浏览 3提问于2011-06-23得票数 0

1回答

UITextField如何删除强密码覆盖

、、、

如图所示，我正在处理一个安全UITextField中的“强密码”覆盖。处理这个问题的正确方法是什么？有一次覆盖出现，我不能让它消失或自动生成一个强密码。谢谢

浏览 65提问于2020-10-21得票数 0

回答已采纳

3回答

用于安卓系统的软件键盘移动editTexts

、、、

我正在尝试让editTexts和登录按钮在软键盘出来时向上移动，但我不希望背景被压缩(我很快就会添加一个图像)。我有一个ScrollView中的TextView(登录)，两个EditTexts(电子邮件和密码)和登录按钮，因为我认为这可能会有所帮助，但我一直无法弄清楚任何事情。

浏览 0提问于2015-05-01得票数 0

2回答

我如何读出并设置Android上软键盘的“移位状态”？

、

我有一个EditText视图，应用程序用户可以输入任何文本(例如用户名或密码)。用户可以切换到软键盘上的“数字移位状态”，例如，只输入数字数字。当用户下一次进入活动时，我希望恢复软键盘的“数字移位状态”，这样他就不必总是切换到他上次使用的键盘状态。在打开软键盘时，我还必须初始化字段的输入方法。有什么方法可以在android上实现吗？注意:我不想通过将inputMethod设置为"number“来强制使用输入法。

浏览 0提问于2015-04-22得票数 0

回答已采纳

1回答

Android -键盘覆盖输入框-即使在Chrome浏览器中也是如此

、、、

有没有一种HTML5 css/js解决方案可以在出现软键盘时增加窗口内容？看起来fullpage.js应用程序接口可能是罪魁祸首，深入挖掘。

浏览 39提问于2016-09-16得票数 2

回答已采纳

1回答

软键盘不在WebView中提供

在那里我加载一个网页，给出用户名和密码。但现在的问题是，没有软键盘是不能帮助任何人的comming.Please。

浏览 2提问于2012-09-12得票数 0

回答已采纳

2回答

在Android webview上，当我执行javascript时，when键盘消失了

、、、、

在WebView中，当我通过webview.loadUrl()执行JavaScript时，如果软键盘可见，它就会消失。当我尝试在html文本字段中键入一些文本时，软键盘消失(如果执行了JavaScript )，并且我无法键入所有文本。文本字段不会失去焦点，因此提示仍在文本字段上，但软键盘关闭。

浏览 0提问于2012-10-24得票数 7

3回答

可以通过javascript (不带phonegap )触发Android软键盘打开吗？

、、

我的移动web应用程序中有一些自定义的web组件，而我需要在字段上手动触发“焦点”事件，以模拟Android软键盘功能中的“下一步”功能。(使用Galaxy S3本机浏览器)。但是，当我手动在“select”字段上触发一个焦点事件时，本地软键盘不显示。随后，我必须单击该字段才能显示它。(当然，在IOS中，它工作得很好)。所以我想知道，如果一个‘焦点’事件没有触发软键盘打开，什么JS事件会？感谢您的帮助！

浏览 0提问于2013-03-17得票数 15

回答已采纳

点击加载更多