Robert Moskowitz Posted June 7, 2019 Share Posted June 7, 2019 (edited) I have a howto: http://www.htt-consult.com/CentOS7-armv7.html That has over 30 textareas with commands. I have set up these textarea so if you click on them, the whole textarea content is selected so it is easy to copy to the clipboard. The style of these textarea are practically the same; just variations in size and if scroll bars are needed. A common content is: <textarea id="box1" readonly="readonly" onclick="this.select()" style="border:1px solid black;resize:none;font-size:inherit;padding-top:1em; margin-left:3em;width:18em;height:2em;overflow-y:hidden;overflow-x:auto; font-family: verdana,tahoma,'Bitstream Vera Sans','DejaVu Sans',arial,helvetica,sans-serif;"> I was wondering if there is a way to set much of this as default so I don't have to have it declared in each textarea tag. thanks Edited June 7, 2019 by Robert Moskowitz Link to comment Share on other sites More sharing options...
Ingolme Posted June 8, 2019 Share Posted June 8, 2019 Is there anything preventing you from just putting those styles into a stylesheet? You can have some Javascript code loop through all textareas in the document and add an event listener for your onclick event.. You can even set the readonly property. var textareas = document.getElementsByTagName("textarea"); for(var i = 0; i < textareas.length; i++) { textareas[i].addEventListener("click", select, false); textareas[i].readonly = true; } function select() { e.currentTarget.select(); } Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted June 13, 2019 Author Share Posted June 13, 2019 I was a LOOONG time away from html. Like I did html 1.0 and then nothing until recently so am using the information here and elsewhere to learn. I tried putting the stylesheet into the html file: <head> <title>CentOS 7 for an Odroid HC1</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="Author" content="Robert Moskowitz"> <meta name="generator" content="Geany 1.33" /> <meta name="description" content="Installing CentOS 7 server on an Odroid HC1"> <meta name="keywords" content="CentOS 7, CentOS 7 server, ARM, armv7, Odroid, HardKernel"> <style> body {"font-size:16px;"} textarea {"border:1px solid black;resize:none;font-size:inherit;padding-top:1em; margin-left:3em;overflow-y:hidden;overflow-x:auto;"} </style> </head> then I set up a texteara: <textarea id="box1" readonly="readonly" onclick="this.select()" style="width:50em;height:8em"> mkdir hardkernel ; cd hardkernel wget https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/sd_fusing.sh \ https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/bl1.bin.hardkernel \ https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/bl2.bin.hardkernel.720k_uboot \ https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/tzsw.bin.hardkernel </textarea> And this text area has the style information inline, but not the internal style information. I am using https://www.w3schools.com/css/css_syntax.asp as my guide... What am I missing? thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2019 Share Posted June 13, 2019 You don't use quotes setting css property and value together, never for property and rarely for the value (example: content: "hello" or in some cases for font-family: value where the value has spaces in the font-family used). body { font-size:16px; } textarea { border:1px solid black; resize:none; font-size:inherit; padding-top:1em; margin-left:3em; overflow-y:hidden; overflow-x :auto; } Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted June 13, 2019 Author Share Posted June 13, 2019 Ah, I see how I missed that. This old dog keeps struggling along learning "new" things. Now to try adding the javascript... Thanks Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted June 13, 2019 Author Share Posted June 13, 2019 On 6/8/2019 at 7:21 PM, Ingolme said: You can have some Javascript code loop through all textareas in the document and add an event listener for your onclick event.. You can even set the readonly property. var textareas = document.getElementsByTagName("textarea"); for(var i = 0; i < textareas.length; i++) { textareas[i].addEventListener("click", select, false); textareas[i].readonly = true; } function select() { e.currentTarget.select(); } I am missing something here. I added the above into my script section, but it is not working. <textarea id="box1" style="width:50em;height:9em;overflow-x:scroll;white-space:pre;"> mkdir hardkernel ; cd hardkernel wget https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/sd_fusing.sh \ https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/bl1.bin.hardkernel \ https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/bl2.bin.hardkernel.720k_uboot \ https://raw.githubusercontent.com/hardkernel/u-boot/odroidxu4-v2017.05/sd_fuse/tzsw.bin.hardkernel </textarea> And script block: <script> var textareas = document.getElementsByTagName("textarea"); for(var i = 0; i < textareas.length; i++) { textareas[i].addEventListener("click", select, false); textareas[i].readonly = true; } function select() { e.currentTarget.select(); } function copyClipboard(x) { var elm = document.getElementById(x); // for Internet Explorer if(document.body.createTextRange) { var range = document.body.createTextRange(); range.moveToElementText(elm); range.select(); document.execCommand("Copy"); // alert("Copied div content to clipboard"); } else if(window.getSelection) { // other browsers var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(elm); selection.removeAllRanges(); selection.addRange(range); document.execCommand("Copy"); // alert("Copied div content to clipboard"); } } </script> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2019 Share Posted June 13, 2019 missed out the function event parameter of 'e' function select(e) { e.currentTarget.select(); } Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted June 13, 2019 Author Share Posted June 13, 2019 Ah, thanks. That was left out in the original code in the 1st reply. So click is now working. But readonly is not. My textarea can still be overwritten locally. The textareas[i].readonly = true; is not doing the job. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2019 Share Posted June 13, 2019 It should be .readOnly = true; Link to comment Share on other sites More sharing options...
Robert Moskowitz Posted June 13, 2019 Author Share Posted June 13, 2019 Thanks, though it is textareas[i].readOnly = true; Almost reminds me of my ASN.1 coding days like subjectAltName... Similar naming construction rules? My next question on this should really be directed to the javascript forum. Should have moved to that a few questions ago I guess. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now