expandinput.html - jscancer - Javascript crap (relatively small)
 (HTM) git clone git://git.codemadness.org/jscancer
 (DIR) Log
 (DIR) Files
 (DIR) Refs
 (DIR) README
 (DIR) LICENSE
       ---
       expandinput.html (2021B)
       ---
            1 <style type="text/css">
            2 textarea.textarea-expanded:focus {
            3         position: absolute;
            4         right: 3px;
            5         width: 600px;
            6         height: 400px;
            7 }
            8 </style>
            9 
           10 <table width="100%">
           11 <thead>
           12         <tr><th align="left">Name</th><th align="right">Note</th></tr>
           13 </thead>
           14 <tbody>
           15         <tr><td>Test1</td><td align="right"><textarea name="input1" class="textarea-expand"></textarea></td></tr>
           16         <tr><td>Test2</td><td align="right"><textarea name="input2" class="textarea-expand"></textarea></td></tr>
           17         <tr><td>Test3</td><td align="right"><textarea name="input3" class="textarea-expand"></textarea></td></tr>
           18         <tr><td>Test4</td><td align="right"><textarea name="input4" class="textarea-expand"></textarea></td></tr>
           19 </tbody>
           20 </table>
           21 
           22 <script type="text/javascript">
           23 /* show up to first newline in input */
           24 function textarea_expand_value(v) {
           25         if (typeof(v) == "undefined")
           26                 return "";
           27         var idx = v.indexOf("\n");
           28         if (idx != -1)
           29                 return v.substring(0, idx);
           30         return v;
           31 }
           32 
           33 function element_set_visible(el, vis) {
           34 //        el.style.visibility = vis ? "visible" : "hidden";
           35         el.hidden = !vis;
           36 }
           37 
           38 /* expand input to textarea for notes */
           39 var els = document.querySelectorAll("textarea.textarea-expand");
           40 for (var i = 0; i < els.length; i++) {
           41         var textarea = els[i];
           42         textarea.classList.add("textarea-expanded"); /* initialized in JS */
           43 
           44         var input = document.createElement("input");
           45         input.type = "text";
           46         input.className = textarea.className; /* set the same class on the input */
           47         input.value = textarea_expand_value(textarea.value);
           48 
           49         element_set_visible(textarea, false);
           50         textarea.parentElement.insertBefore(input, textarea);
           51 
           52         input.onfocus = (function(input, textarea) {
           53                 return function() {
           54                         element_set_visible(input, false);
           55                         element_set_visible(textarea, true);
           56                         textarea.focus();
           57                 };
           58         })(input, textarea);
           59 
           60         textarea.onblur = (function(input, textarea) {
           61                 return function() {
           62                         element_set_visible(textarea, false);
           63                         element_set_visible(input, true);
           64                         input.value = textarea_expand_value(textarea.value);
           65                 };
           66         })(input, textarea);
           67 }
           68 </script>