Question

我需要在使用jQuery键入自己时加密字段中输入的值。

这可能吗？

Answer 1

您可以使用onchange事件字段来完成此操作。

jQuery('#myField').on('change', function() {});

Answer 2

您需要考虑的事项：

我如何加密文字。
我是否需要在之后解密文本以在别处阅读，或者我只是进行比较（如密码）。

对于加密，我建议CryptoJS。我之前使用过这个，并且有很多加密方法。

如果您只是保存数据而无需解密，则您需要使用Hash。

如果您想要在之后解密数据以阅读原文，那么您将要使用Cipher。

一旦您确定了设置，您就需要编写一些代码。克里斯托弗卡尔森的方法是基本的开始，但是你需要考虑这样一个事实：＆＃34;加密时你输入＆＃34;意味着您之前输入的字符将被多次加密，最终产品不会成为整个单词加密的真实表示。

例如，如果我想输入foo并且字母f转换为p，那么当我输入o时，它会尝试加密po这不是你想要的。

所以我们需要一些地方来记录我们的原始输入，在我建议的隐藏字段中。

另一个问题是加密值往往比你输入的字符多得多，所以我们必须提出一个慷慨的处理方式，否则它会去导致进入文本的人头疼。我建议做一些关注焦点和模糊监听器，以便在我们获得/失去焦点时隐藏/显示加密

所以我们把它们放在一起：

＆＃13;

$('input').on('change blur', function() {
  var strName = $(this).prop('name');
  var strEncrypted = '';
  var objOriginal = $('#' + strName + 'Original');
  var strVal = objOriginal.val();
  switch(strName) {
    case 'Hash':
      strEncrypted = CryptoJS.MD5(strVal)
      break;
    case 'Cipher':
      strEncrypted = CryptoJS.AES.encrypt(strVal, "Secret Passphrase");
      $('#DeCipher').text(CryptoJS.AES.decrypt(strEncrypted, "Secret Passphrase").toString(CryptoJS.enc.Utf8));
      break;
  }
  $(this).val(strEncrypted);
});

$('input').on('keyup focus', function(e) {
  var intKey = e.keyCode;
  $(this).val($(this).val()); // Hack to set the cursor at the end
  var strName = $(this).prop('name');
  var objOriginal = $('#' + strName + 'Original');
  var blnIsChar = ((intKey > 47 && intKey < 91) || (intKey > 95 && inKey < 112) || (intKey > 185 && inKey < 193) || (intKey > 218 && inKey < 223)) // Create boolean for key pressed in an input character
  if (intKey == 8) { // If we pressed backspace
    var strVal = objOriginal.val()
    if ($(this).val().length) { //if we have some characters
      strVal = strVal.slice(0, $(this).val().length); // remove number of characters
    } else {
      strVal = '';
    }
    objOriginal.val(strVal);
  } else if (blnIsChar) {
    var strLetter = $(this).val().slice(-1)
    var strVal = objOriginal.val() + strLetter;
    var strNew = '';
    for (i = 0; i < objOriginal.val().length; i++) { 
      strNew += '●'
    }
    objOriginal.val(strVal);
    $(this).val(strNew + strLetter);
  } else if (e.type == 'focus') {
    var strNew = '';
    for (i = 0; i < objOriginal.val().length; i++) { 
      strNew += '●'
    }
    $(this).val(strNew);
  }
});

＆＃13;

label {
  width:60px;  
  display:inline-block;
}
#DeCipher {
  font-weight:bold;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<input type="hidden" id="HashOriginal" name="HashOriginal" />
<input type="hidden" id="CipherOriginal" name="CipherOriginal" />
<p><label for="Hash">Hasher:</label><input type="text" id="Hash" name="Hash" /></p>
<p><label for="Cipher">Cipher:</label><input type="text" id="Cipher" name="Cipher" /></p>
<p>Decipher: <span id="DeCipher"></span></p>

＆＃13;

如何使用jquery键入输入字段时加密值？

2 个答案: