ｶﾀｶﾀｶﾀｯﾀｰﾝを可視化した

クソアプリアドベントカレンダー2017

何を言っているのか

製作時間

30分ぐらい

内容

input要素のtypeがtextまたはsearchの要素、もしくはテキストエリア内におけるキャレットの位置を画面内の絶対値として取得し、その周辺に打鍵と同時に画像を散らかしています。

キャレット位置の取得方法

これの実現については今回は自前実装ではなく caretposition.jsという素晴らしいライブラリがあったので、使わせていただいてます。
http://d.akiroom.com/2012-06/jquery-textarea-caret-position-javascript-library/

実装

'use strict';
document.onkeydown = function (e) {
  var current = document.activeElement;
  if (e.key === 'Backspace') {
    return true;
  }
  if (current.type === 'textarea' || current.type === 'text' || current.type === 'search') {
    var isEnter = e.key === 'Enter';
    var prefix = isEnter ? 'tan' : 'kata';
    var size = isEnter ? rand(80, 100) : rand(10, 20);
    var caretPosition = Measurement.caretPos(current);
    var imgUrl = chrome.extension.getURL('images/' + prefix + '_' + rand(1, 4) + '.svg');
    var $img = $('<img width="' + size + '">');
    $img.attr('src', imgUrl);
    $img.css({
      'position': 'absolute',
      'top': caretPosition.top + rand(-10, 10),
      'left': caretPosition.left + rand(-10, 10),
      'zIndex': 99999
    });
    $('body').append($img);
    $img.animate({
      'top': caretPosition.top + rand(-40, 40),
      'left': caretPosition.left + rand(-40, 40),
      'width': size + (isEnter ? rand(30, 50) : rand(10, 20)),
      'opacity': 0
    }, 500, function () {
      $img.remove();
    })
  }

  function rand(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }
}