Jump to content
Robert Moskowitz

setting defaults for textarea

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...