Japaste

Japanese Form Filler Helper Bookmarklet

Introduction

Japanese Web design is… unique. The UX may be functional but is often frustrating. I was tired of them always making me break my phone number or postal code into multiple fields, so I made a bookmarklet out of it, Japaste.

There's also a demo of the feature of this bookmarklet in a proof of concept on CodePen.

By RÉMINO

Installation

Drag this button link to your bookmarks:
Japaste

Alternatively, add a new bookmark yourself, edit it, then paste this URL in it:

javascript:void(function()%7B%22use%20strict%22;const%20n=(e=document)=%3E%7Blet%20t=e.activeElement;return%20t=%22IFRAME%22===t.tagName?n(t.contentDocument):t%7D;const%20s=n,c=e=%3Ee.split(%22%22).map(e=%3E%7Bvar%20t=e.charCodeAt(0);return%2065281%3C=t&&t%3C=65374?String.fromCharCode(t-65248):e%7D).join(%22%22),l=e=%3Ee.split(%22%22).map(e=%3E%7Bvar%20t=e.charCodeAt(0);return%2033%3C=t&&t%3C=126?String.fromCharCode(t+65248):e%7D).join(%22%22);!function%20t()%7Bconst%20a=e=%3E%7Bconsole.error(%60%5B$%7Bt.name%7D%5D%20%60+e),alert(%22%22+e)%7D,i=(n,...e)=%3Ee.reduce((e,t)=%3E(e%5B1%5D.push(n.slice(e%5B0%5D,t)),e%5B0%5D=t,e),%5B0,%5B%5D%5D)%5B1%5D;(async()=%3E%7Bvar%20e,n=await(async()=%3E%7Btry%7Breturn%20navigator.clipboard.readText()%7Dcatch(e)%7Breturn%20console.error(e),%22%22%7D%7D)();if(n)%7Bconst%20r=(e=%3E%7Bconst%20t=c(e.replace(/%5B%5E0-9%EF%BC%90-%EF%BC%99%5D/g,%22%22));return%207===t.length?i(t,3,7):16===t.length?i(t,4,8,12,16):t.startsWith(%2203%22)%7C%7Ct.startsWith(%2206%22)?i(t,2,6,10):i(t,3,7,11)%7D)(n);if(r.length%7C%7Cr%5B0%5D)%7Blet%20t=s();if(%22INPUT%22!==(t=t&&%22INPUT%22===t.tagName?t:(e=r.join(%22-%22),await%20new%20Promise((t,n)=%3E%7Btry%7Bconst%20r=document.createElement(%22style%22),o=(r.textContent=%22*%20%7B%20cursor:%20crosshair%20!important;%20%7D%22,document.createElement(%22div%22)),a=(o.style.cssText=%60%0A%09%09%09%09all:%20initial;%0A%09%09%09%09background:%20Canvas;%0A%09%09%09%09border-sizing:%20border-box;%0A%09%09%09%09bottom:%2014px;%0A%09%09%09%09border:%20solid%201px%20CanvasText;%0A%09%09%09%09border-radius:%204px;%0A%09%09%09%09color:%20CanvasText;%0A%09%09%09%09font-family:%20sans-serif;%0A%09%09%09%09font-size:%2016px;%0A%09%09%09%09left:%2050vw;%0A%09%09%09%09padding:%2010px%2020px;%0A%09%09%09%09pointer-events:%20none;%0A%09%09%09%09position:%20fixed;%0A%09%09%09%09transform:%20translateX(-50%25);%0A%09%09%09%09z-index:%20999999;%0A%09%09%09%60,o.innerHTML=%60Click%20on%20an%20input%20field%20to%20paste%20%3Cstrong%3E$%7Be%7D%3C/strong%3E%60,document.head.appendChild(r),document.body.appendChild(o),e=%3E%7Be.preventDefault(),e.stopPropagation(),document.removeEventListener(%22click%22,a,!0),document.head.removeChild(r),document.body.removeChild(o),t(e.target)%7D);document.addEventListener(%22click%22,a,!0)%7Dcatch(e)%7Bn(e)%7D%7D))).tagName)a(%22No%20input%20field%20selected.%22);else%7Bvar%20n=t.value.trim();for(c(n)!==r%5B0%5D%7C%7C(e=%3E%7Be=e.charCodeAt(0);return%2065281%3C=e&&e%3C=65374%7D)(n)%7C%7Cr.forEach((e,t)=%3E%7Br%5Bt%5D=l(e)%7D);t&&r.length&&r%5B0%5D.length;)%7Blet%20e;if(t.value=r.shift(),!(e=r.length?(e=%3E%7Bvar%20t=e%5B%22form%22%5D;const%20n=Array.from(t.elements);t=n.indexOf(e);if(-1%3Ct&&t%3Cn.length-1)%7Be=n%5Bt+1%5D;if(%22INPUT%22===e.tagName)return%20e%7Dreturn%20null%7D)(t):e))break;t=e%7Dconst%20o=t%5B%22form%22%5D;o&&(n=new%20Event(%22change%22,%7Bbubbles:!0%7D),o.dispatchEvent(n))%7D%7Delse%20a(%22There%20is%20no%20number%20to%20paste%20in%20the%20clipboard.%22)%7Delse%20a(%22Failed%20to%20read%20clipboard.%22)%7D)()%7D()%7D())

Once you have it installed, you can test its functionality on this page.

Usage

To use this thing:

Copy a Japanese phone number or postal code from somewhere.
Run the bookmarklet.
Select the first field to paste it into.

If an input field is already in focus, that field will automatically be used.
Repeat the same process to convert the numbers to double width characters and again to revert them into single width.

Playground

Install the bookmarklet then try it out here. Or just click the bookmarklet at the top of the page to give it a go before installing it.