☰

Clear Button For Almost Every Text Input Field

Adds clear button for almost every <input type="text">, like ms-clear.

  1. // ==UserScript==
  2. // @name        Clear Button For Almost Every Text Input Field
  3. // @name:ja     Clear Button For Almost Every Text Input Field
  4. // @namespace   https://greasyfork.org/ja/users/24052-granony
  5. // @description Adds clear button for almost every <input type="text">, like ms-clear.
  6. // @description:ja ほぼすべての<input type="text">に対して ms-clear のようなクリアボタンを追加します．
  7. // @include     http://*
  8. // @include     https://*
  9. // @version     1.0.0
  10. // @grant       none
  11. // @license     MIT License
  12. // ==/UserScript==
  13. /*
  14.   = Detailed Description (Japanese) =
  15.   このスクリプトはほとんどのサイトのテキストフィールドに対してレイアウトを崩
  16.   すことなしに ms-clear のようなクリアボタンを追加します．クリアボタンはテキ
  17.   ストフィールドにマウスカーソルがある場合のみ，フィールド内部の右側
  18.   （text-align=="right"の場合は左側）に表示されます．クリアボタンの表示される
  19.   位置にサイトが送信ボタンなどの要素を配置している場合 (たとえば Twitter の検
  20.   索フォーム) には動作しません．
  21.  
  22.   = Detailed Description (English) =
  23.   This script adds clear button for almost evey text-field in web site 
  24.   without breaking its layout, like ms-clear. The clear button is 
  25.   displayed on the right side (or left side if text-align=="right") of
  26.   the inside of the field when the mouse cursor is over the field. The
  27.   clear button does not work if the web site puts some elements (such as
  28.   submit button) on the clear button's place (e.g. search form in Twitter).
  29. */
  30. (function () {
  31.   'use strict';
  32.   var wmap = new WeakMap(); // text-field と button の対応
  33.   var textFields = [];
  34.   
  35.   // ウィンドウの左上を基準とした要素の位置を得る
  36.   var getOffset = function (elem) {
  37.     var rect = elem.getBoundingClientRect();
  38.     var positionX = rect.left;
  39.     var positionY = rect.top;
  40.     var scrollX = document.body.scrollLeft;
  41.     var scrollY = document.body.scrollTop;
  42.     return {
  43.       x: positionX + scrollX,
  44.       y: positionY + scrollY
  45.     };
  46.   }
  47.   
  48.   // ボタンを作成する
  49.   var createButton = function (textField) {
  50.     var button = document.createElement('div');
  51.     button.innerHTML = '<span style="position:relative; font-family: Arial, sans-serif">x</span>';
  52.     textField.parentNode.insertBefore(button, textField.nextSibling);
  53.     (function () {
  54.       var bs = button.style;
  55.       button.addEventListener('click', function () {
  56.         textField.value = '';
  57.       });
  58.       textField.addEventListener('mouseenter', function () {
  59.         bs.display = 'inline-block';
  60.       });
  61.       button.addEventListener('mouseenter', function () {
  62.         bs.display = 'inline-block';
  63.       });
  64.       textField.addEventListener('mouseleave', function () {
  65.         bs.display = 'none';
  66.       });
  67.       button.addEventListener('mouseleave', function () {
  68.         bs.display = 'none';
  69.       });
  70.     })();
  71.     return button;
  72.   }
  73.   
  74.   // ボタンの位置とサイズを更新する
  75.   var updateButton = function (textField) {
  76.     var button = wmap.get(textField);
  77.     var th = textField.clientHeight;
  78.     var tw = textField.clientWidth;
  79.     var size = th * 0.7;
  80.     var innerShift = size * 0.1;
  81.     var ts = textField.style;
  82.     var tsp = ts.position? ts.position.toLowerCase(): '';
  83.     var innerText = button.getElementsByTagName('span') [0];
  84.     innerText.style.top = - innerShift + 'px';
  85.     var bs = button.style;
  86.     var bsOriginalDisplay = bs.display;
  87.     
  88.     bs.display = 'inline-block';
  89.     bs.textAlign = 'center';
  90.     bs.borderRadius = '50%';
  91.     bs.fontSize = size + 'px';
  92.     bs.width = size + 'px';
  93.     bs.height = size + 'px';
  94.     bs.lineHeight = size + 'px';
  95.     bs.padding = '0';
  96.     bs.margin = '0';
  97.     bs.cursor = 'pointer';
  98.     bs.color = '#AAAAAA';
  99.     bs.backgroundColor = '#DDDDDD';
  100.     bs.position = (tsp == 'fixed') ? 'fixed' : 'absolute';
  101.     bs.top = 0;
  102.     bs.bottom = 0;
  103.     bs.left = 0;
  104.     bs.right = 0;
  105.     bs.zIndex = ts.zIndex ? ts.zIndex : "auto";
  106.     var tOffset = getOffset(textField);
  107.     var bOffset = getOffset(button);
  108.     bs.top = (tOffset.y - bOffset.y) + th * 0.15 + 'px';
  109.     
  110.     if(getComputedStyle(textField).textAlign=='right'){
  111.       bs.left = (tOffset.x - bOffset.x)      + size * 0.1 + 'px';
  112.     }else{
  113.       bs.left = (tOffset.x - bOffset.x) + tw - size * 1.1 + 'px';
  114.     }
  115.     if (bsOriginalDisplay != 'inline-block') {
  116.       bs.display = 'none';
  117.     }
  118.     
  119.     return button;
  120.   }
  121.   
  122.   // ボタンの登録
  123.   // onload 時と DOM の変化が検出されるたびに実行される
  124.   var registerButtons = function () {
  125.     var inputs = document.getElementsByTagName('input');
  126.     for (var i = 0; i < inputs.length; i++) {
  127.       var input = inputs[i];
  128.       var iType = input.getAttribute('type')==null?"text":input.getAttribute('type').toLowerCase();
  129.       console.log(input.getAttribute('id'), input.getAttribute('type'), iType);
  130.       if (iType!='text' && iType!='search') {
  131.         continue;
  132.       }
  133.       if (wmap.has(input)) {
  134.         continue;
  135.       }
  136.       if (getComputedStyle(input).display == 'none') {
  137.         continue;
  138.       }
  139.       
  140.       textFields.push(input);
  141.       var button = createButton(input);
  142.       wmap.set(input, button);
  143.       updateButton(input);
  144.     }
  145.     return;
  146.   }
  147.   
  148.   // 全ボタンの位置とサイズを更新
  149.   var updateAllButtons = function () {
  150.     for (var i = 0; i < textFields.length; i++) {
  151.       updateButton(textFields[i]);
  152.     }
  153.   }
  154.   
  155.   // DOM の構築時にボタンを登録
  156.   registerButtons();
  157.   
  158.   // Load 完了時にボタンの位置を更新
  159.   window.addEventListener('load', updateAllButtons);
  160.  
  161.   // ウィンドウサイズが変化した場合はボタンの位置だけ更新する
  162.   (function(){
  163.     var resizeTimer = false;
  164.     window.addEventListener('resize', function () {
  165.       if (resizeTimer !== false) {
  166.         clearTimeout(resizeTimer);
  167.       }
  168.       resizeTimer = setTimeout(function () {
  169.         updateAllButtons();
  170.       }, 100);
  171.     });
  172.   })();
  173.   
  174.   // DOM の変化時には追加された text-field にボタンを登録し，
  175.   // 全てのボタンの位置を更新する
  176.   (function(){
  177.     var DOMObserverTimer = false;
  178.     var DOMObserverConfig = {
  179.       attributes: true,
  180.       childList: true,
  181.       subtree: true
  182.     };
  183.     var DOMObserver = new MutationObserver(function () {
  184.       if (DOMObserverTimer !== 'false') {
  185.         clearTimeout(DOMObserverTimer);
  186.       }
  187.       DOMObserverTimer = setTimeout(function () {
  188.         DOMObserver.disconnect();
  189.         registerButtons();
  190.         updateAllButtons();
  191.         DOMObserver.observe(document.body, DOMObserverConfig);
  192.       }, 100);
  193.     });
  194.     DOMObserver.observe(document.body, DOMObserverConfig);
  195.   })();
  196.   
  197. }) ();