Password Length Indicator

Indicate password fields that have a maximum length of characters.

当前为 2021-09-30 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Password Length Indicator
  3. // @namespace trockenasche
  4. // @version 3.0
  5. // @description Indicate password fields that have a maximum length of characters.
  6. // @author trockenasche
  7. // @homepage https://github.com/trockenasche/US-Password-Length-Indicator
  8. // @supportURL https://github.com/trockenasche/US-Password-Length-Indicator/issues
  9. // @include *
  10. // @icon https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Three_asterisks.svg/32px-Three_asterisks.svg.png
  11. // @grant none
  12. // @run-at document-idle
  13. // @license MIT
  14. // ==/UserScript==
  15.  
  16. function addGlobalStyle(css) {
  17. var head, style;
  18. head = document.getElementsByTagName('head')[0];
  19. if (!head) {
  20. return;
  21. }
  22. style = document.createElement('style');
  23. style.innerHTML = css;
  24. head.appendChild(style);
  25. }
  26.  
  27. function removeMaxLength() {
  28. var passFields = document.querySelectorAll("input[type='password']");
  29. [].forEach.call(passFields, function (passField) {
  30. passField.removeAttribute("maxLength");
  31. passField.style.border = "0px";
  32. })
  33. var spans = document.querySelectorAll("span.us-pli-span");
  34. [].forEach.call(spans, function (span) {
  35. span.remove();
  36. });
  37. }
  38.  
  39. (function () {
  40. 'use strict';
  41. var passFields = document.querySelectorAll("input[type='password']");
  42.  
  43. if (passFields.length == 0) {
  44. // Couldn't find any password fields, leaving function.
  45. return;
  46. }
  47.  
  48. addGlobalStyle(`div.us-pli {
  49. position: relative;
  50. display: flex;
  51. flex-direction: row;
  52. width: 100%;
  53. align-content: flex-end;}`);
  54. addGlobalStyle(`div.us-pli>span {
  55. padding: 0px 1px;
  56. background: coral;
  57. border: 1px solid coral;
  58. align-self: center;
  59. border-radius: 0px 5px 5px 0px;`);
  60. addGlobalStyle(`a.us-pli-button {
  61. color: white;
  62. font-family: Verdana, Arial, Helvetica, sans-serif;
  63. font-size: 0.9em;
  64. text-decoration: none;
  65. }`);
  66. addGlobalStyle(`a.us-pli-button:hover {
  67. color: red;
  68. text-decoration: line-through;
  69. }`);
  70.  
  71. [].forEach.call(passFields, function (passField) {
  72. if (passField.maxLength > 0) {
  73. passField.style.border = "2px solid coral";
  74.  
  75. // Add the div before the input field.
  76. var wrapper = document.createElement('div');
  77. wrapper.classList.add('us-pli');
  78. passField.parentNode.insertBefore(wrapper, passField);
  79. // And move the input field inside the div element.
  80. wrapper.appendChild(passField);
  81.  
  82. // Add the span element with the maxLength value at the end of the input element.
  83. passField.insertAdjacentHTML('afterend', '<span class="us-pli-span"><a href="javascript:void\(0\)" class="us-pli-button" title="remove limit!"> ' + passField.maxLength + '</a></span>');
  84. }
  85. });
  86.  
  87. var usPliButtons = document.querySelectorAll("a.us-pli-button");
  88. if (usPliButtons.length > 0) {
  89. [].forEach.call(usPliButtons, function (usPliButton) {
  90. usPliButton.addEventListener("click", removeMaxLength);
  91. });
  92. }
  93.  
  94. return;
  95. })
  96.  
  97. ();