LOG IN

ブラウザをテキストエディタに変える、の応用

by 飛鳥

下記の記事は、簡単な文字列をブラウザのURL欄に入力すると簡易メモ帳になるというTIPSです

「【HTML】ブラウザでのメモ帳機能」

https://qiita.com/ringCurrent/items/3d94ba0a8d4e4870a7c2

上記の応用で、背景つけて文字数カウントできるようにしてみました

下記にある長ったらしいコードをブラウザのURL入力欄に打ち込むと、何故かブラウザが文字数カウント付きのテキストエディタになります

特に意味はないですがなんとも不思議です

※macのgoogle chromeしか検証できてないです

-------

data:text/html, <html contenteditable="plaintext-only"> <style>body{background-color:%23333;background-image: linear-gradient(-20deg, %232b5876 0%, %23000 100%);color:%23eee;font-family:menlo;max-width:800px;margin:50px auto;line-height:1.8;position:relative;} div:after{content:'0';color:%23eee;position:fixed;right:30px;bottom:30px;font-size:20px;pointer-events: none;user-select: none ;}</style> <script> window.onload = function(){ var new_element = document.createElement('div'); new_element.id='wrapper'; new_element.textContent = 'please input text.'; document.body.appendChild(new_element); var new_element = document.createElement('p'); document.querySelector('div').appendChild(new_element); bodyCount(); document.body.onkeyup = function () { bodyCount(); } }; function bodyCount(){ var sheets = document.styleSheets, sheet = sheets[sheets.length - 1]; if (sheet.insertRule){ var count = document.querySelector('%23wrapper').innerText.replace(/\n/g, '').replace(/\s+/g, '').length; sheet.insertRule('div:after { content:"' + count + '"', sheet.cssRules.length); } } </script>

-------

……あ、もうちょっとちゃんと書きたい方はこちらをどうぞ

小説執筆ツール「notes」

https://notes.underxheaven.com/

試作型「いろはエディタ」

https://underxheaven.com/test/iroha

OTHER SNAPS