setting defaults for textarea

Robert Moskowitz · June 7, 2019

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

Ingolme · 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();
}

Robert Moskowitz · 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

dsonesuk · 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;
	}

Robert Moskowitz · 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

Robert Moskowitz · 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>

dsonesuk · June 13, 2019

missed out the function event parameter of 'e'

function select(e) {
  e.currentTarget.select();
}

Robert Moskowitz · 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.

dsonesuk · June 13, 2019

It should be .readOnly = true;

Robert Moskowitz · 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.

Sign In

setting defaults for textarea

Recommended Posts

Robert Moskowitz

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Robert Moskowitz

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Robert Moskowitz

Link to comment

Share on other sites

Robert Moskowitz

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Robert Moskowitz

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Robert Moskowitz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity