时间戳

首页 > 解决方案 > 我的数字小键盘不显示密码字段中的按键

javascript - 我的数字小键盘不显示密码字段中的按键

问题描述

我正在从“ building-cross-platform-mobile-pawan-lingras ”一书中做练习，但是每次单击键盘时，数字键盘都不会在文本框中显示值。

我已经将 html 文件与 JS 文件和引导程序链接起来。

下面是html的代码示例：

 Password:<input type="password" id="passcode"></input>
 -----
 ----
 <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button"   onclick="addValueToPassword(4)">4</a>
        <a data-role="button"   onclick="addValueToPassword(5)">5</a>
        <a data-role="button"   onclick="addValueToPassword(6)">6</a>
    </div>

JavaScript 示例：

function addValueToPassword(button)
{
var currVal=$("passcode").val();
if(button=='bksp')
{
    $("#passcode").val(currVal.substring(0, currVal.length-1));
}
else{
    $("#passcode").val(currVal.concat(button));
}
}

标签： javascriptjquerybootstrap-4

解决方案

您在 var行中错过了#符号。currVal=$("#passcode").val()jQuery 将无法找到 DOM 元素密码，因此$("passcode").val()返回undefined。当你在 undefined 上调用concat 函数时，它会抛出异常。您可以将 if...else 替换为三元运算符，如下所示。

function addValueToPassword(button)
{
  var currVal=$("#passcode").val();
  let passCode = button === 'bksp' ? currVal.substring(0, currVal.length-1) : currVal.concat(button);
  $("#passcode").val(passCode);
}


function addValueToPassword(button)
{
  var currVal=$("#passcode").val();
  if(button=='bksp')
  {
      $("#passcode").val(currVal.substring(0, currVal.length-1));
  }
  else
  {
      $("#passcode").val(currVal.concat(button));
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Password:<input type="password" id="passcode"></input>

 <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button"   onclick="addValueToPassword(4)">4</a>
        <a data-role="button"   onclick="addValueToPassword(5)">5</a>
        <a data-role="button"   onclick="addValueToPassword(6)">6</a>
    </div>

推荐阅读