add expandinput - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit eca02a9b8fb5bab4d0f79cc9c4727860cd192adc
(DIR) parent 80488f8eae9c4ae13790392062ed30dafb4064d8
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Fri, 11 Mar 2022 12:43:41 +0100
add expandinput
Diffstat:
A expandinput/README | 15 +++++++++++++++
A expandinput/expandinput.html | 68 +++++++++++++++++++++++++++++++
2 files changed, 83 insertions(+), 0 deletions(-)
---
(DIR) diff --git a/expandinput/README b/expandinput/README
@@ -0,0 +1,15 @@
+expandinput
+===========
+
+Small script to expand input to a textarea.
+
+It will show the top line of the area when the input is not active.
+
+It can be used to have some small note-taking field which is active when the
+input is focused.
+
+
+Author
+------
+
+Hiltjo Posthuma <hiltjo@codemadness.org>
(DIR) diff --git a/expandinput/expandinput.html b/expandinput/expandinput.html
@@ -0,0 +1,68 @@
+<style type="text/css">
+textarea.textarea-expanded:focus {
+ position: absolute;
+ right: 3px;
+ width: 600px;
+ height: 400px;
+}
+</style>
+
+<table width="100%">
+<thead>
+ <tr><th align="left">Name</th><th align="right">Note</th></tr>
+</thead>
+<tbody>
+ <tr><td>Test1</td><td align="right"><textarea name="input1" class="textarea-expand"></textarea></td></tr>
+ <tr><td>Test2</td><td align="right"><textarea name="input2" class="textarea-expand"></textarea></td></tr>
+ <tr><td>Test3</td><td align="right"><textarea name="input3" class="textarea-expand"></textarea></td></tr>
+ <tr><td>Test4</td><td align="right"><textarea name="input4" class="textarea-expand"></textarea></td></tr>
+</tbody>
+</table>
+
+<script type="text/javascript">
+/* show up to first newline in input */
+function textarea_expand_value(v) {
+ if (typeof(v) == "undefined")
+ return "";
+ var idx = v.indexOf("\n");
+ if (idx != -1)
+ return v.substring(0, idx);
+ return v;
+}
+
+function element_set_visible(el, vis) {
+// el.style.visibility = vis ? "visible" : "hidden";
+ el.hidden = !vis;
+}
+
+/* expand input to textarea for notes */
+var els = document.querySelectorAll("textarea.textarea-expand");
+for (var i = 0; i < els.length; i++) {
+ var textarea = els[i];
+ textarea.classList.add("textarea-expanded"); /* initialized in JS */
+
+ var input = document.createElement("input");
+ input.type = "text";
+ input.className = textarea.className; /* set the same class on the input */
+ input.value = textarea_expand_value(textarea.value);
+
+ element_set_visible(textarea, false);
+ textarea.parentElement.insertBefore(input, textarea);
+
+ input.onfocus = (function(input, textarea) {
+ return function() {
+ element_set_visible(input, false);
+ element_set_visible(textarea, true);
+ textarea.focus();
+ };
+ })(input, textarea);
+
+ textarea.onblur = (function(input, textarea) {
+ return function() {
+ element_set_visible(textarea, false);
+ element_set_visible(input, true);
+ input.value = textarea_expand_value(textarea.value);
+ };
+ })(input, textarea);
+}
+</script>