HTML Snippet - 100% Fill Textarea-Page

Posted at

The base of numerous of custom HTML-components
and functional pages is a "textarea page" which consist of
a (surprise surprise..) <textarea> element
and some sort of functionality integrated by a form-submit, JavaScript,
or a mix of both.



Although quite easy to manufacture-
- a minimal, properly formatted template is
always nice to have handy on demand.


<!doctype html>
<!-- ☆☆☆Unicode Is Fun☆☆☆ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style media="all">
html,body,textarea{
border: 1px solid gray;
outline: none transparent;
border-collapse: collapse;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border-spacing: 0;
resize: none;
text-size-adjust: auto;
whitespace: pre-line;
box-sizing: border-box;
font: 30pt 'Courier New', monospace;
background-origin: border-box;
background: none transparent;
display: block;
}
html,body{ overflow: hidden; }
textarea{ overflow-x: hidden; overflow-y:scroll; }

::-webkit-input-placeholder{
color: lightgray;
font-style: italic;
}
</style>
</head>
<body><textarea placeholder="line #1..."></textarea></body>
<script>
(function(window,document,textarea){ "use strict";
textarea.placeholder = "line #1\
line #2\
\\line...";
}(
self
,self.document
,self.document.querySelector('textarea')
));
</script>
</html>





Add some key-listening functionality to generate a creative online toolkit,
place in a separate HTML file and open it using JavaScript window.open to create a pop-up input-box,
place it in an iframe, use it as a modal component,
or simply use an a handy Unicode-supported editor (you browser is very good at presenting a wide variety of characters you probably won't find in any native OS-editor).




Just for fun here is the same code-above, in an iframe:





*note:
if you wish to customize the template, just remember to keep the textarea as display:block, otherwise it will not fill the entire page..





A little toolkit, that uses the base-page above,
this one sorts and unique text-lists (removes repeating lines).


<!doctype html>
<!-- ☆☆☆Unicode Is Fun☆☆☆ -->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style media="all">
html,body,textarea{
border: 1px solid gray;
outline: none transparent;
border-collapse: collapse;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border-spacing: 0;
resize: none;
text-size-adjust: auto;
whitespace: pre-line;
box-sizing: border-box;
font: 30pt 'Courier New', monospace;
background-origin: border-box;
background: none transparent;
display: block;
}
html,body{ overflow: hidden; }
textarea{ overflow-x: hidden; overflow-y:scroll; }

::placeholder, ::-webkit-input-placeholder{ /*just a nice placeholder styling*/
color: lightgray;
font-style: italic;
}
</style>
<title>Sort&Unique</title>
</head>
<body><textarea placeholder="line #1..." spellcheck="true" autocomplete="on"></textarea></body>
<script>
(function(window,document,textarea){ "use strict";
textarea.placeholder = "line #1\
line #2\
\\line...";
textarea.onkeyup = function(ev){
if(false === (13 === ev.keyCode || 13 === ev.which)) return true; //do nothing (allow key event)
if(false === ev.ctrlKey) return true; //do nothing (allow key event)
if(true === textarea.is_working) return true; //do nothing (allow key event)
ev.cancelBubble = true;
("function" === typeof ev.preventDefault) && (ev.preventDefault());
("function" === typeof ev.stopPropagation) && (ev.stopPropagation());
textarea.is_working = true; //singleton lock

textarea.value = (function(tmp){
tmp = textarea.value.replace(/[\\
]+/g,"\
").split("\
"); //unify the new-line as EOL (Win/*nix/MacOS)
tmp = tmp.reduce(function(carry,item){ //uniquify all lines.
carry[item] = "";
return carry;
},{});
tmp = Object.keys(tmp).sort(); //plain sort, browser implementation.
return tmp.join("\
"); //result.
}());

textarea.is_working = false; //singleton release
return false; //arrived here? [CTRL]+[ENTER] was pressed, disable the event so no additional new-line will be added...
};
}(
self
,self.document
,self.document.querySelector("textarea")
));
</script>
</html>


And here is a live example you can play with:




This latest version: https://github.com/eladkarako/sort.eladkarako.com also includes a 'natural sort' (1<2<10<20) instead of default array sort (1<10<2<20).



Enjoy!