Javascript Course

- Select the content of DIV by ID
- Select content of multiple elements with same class

This article shows you how to select the content added into HTML elements: input text field, textarea, DIV, and ather html elements.

Select text in input and textarea fields

It is simple to select the text added into an input text field or into a textarea, just apply the select() method to the input or textarea element.
element.select()
Example. When click on an input text field or textarea, selects its content.
<form action="#" method="post">
 <input type="text" name="inp1" id="inp1" value="Click to select" /><br/>
 <textarea name="txta1" id="txta1" cols="20" rows="3">Click to select</textarea>
</form>

<script>
// registers on click event to select #inp1 field data
document.getElementById('inp1').addEventListener('click', function(e){
  e.target.select();
});
  /* e.target is the the clicked element */

// registers on click event to select #txta1 textarea data
document.getElementById('txta1').addEventListener('click', function(e){
  e.target.select();
});
</script>
- Demo. Click on the input text field and textarea.

Select the content of DIV by ID

If you want to select all the content added into a DIV (or other HTML tag, like <span>, <li>, <blockquote>, etc.), use theselectElmCnt() function, presented below.
- This function receives an object with the element you want to select.

Code of the theselectElmCnt() function
// selects the content of an element. Receives the object with that element
function selectElmCnt(elm) {
  // for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
  }
  else if(window.getSelection) {
    // other browsers
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}
- Example. When click on the text added into a DIV, selects all its content.
<div id="exdv1">
 Courses for Web Programming and Development: https://CoursesWeb.net<br/>
 <span>Other line with child element.</span>
</div>

<script>
// selects the content of an element. Receives the object with that element
function selectElmCnt(elm){
  // for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
  }
  else if(window.getSelection) {
    // other browsers
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

// registers on click event to use the selectElmCnt() function whewn click on #exdv1 div
document.getElementById('exdv1').addEventListener('click', function(){
  selectElmCnt(this);
});
</script>
Demo (click the text):
Courses for Web Programming and Development: https://CoursesWeb.net
Other line with child element.

Select content of multiple elements with same class

To select the content of multiple elements with same class, use querySelectorAll() to get an array with those elements, then, traverse the array and register "click" to each item, that calls the selectElmCnt() function presented above.
- Example:
<div class="excls">Click to select - Simple Div</div>
<pre class="excls">Content in PRE tag</pre>
<div class="excls">Another Div with same class</div>
<blockquote class="excls">Content in a blockquote html tag.</blockquote>

<script>
// selects the content of an element. Receives the object with that element
function selectElmCnt(elm) {
  // for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
  }
  else if(window.getSelection) {
    // other browsers
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

//get array with all .excls elements
var excls = document.querySelectorAll('.excls');

//register click to each excls item that calls selectElmCnt()
for(var i=0; i<excls.length; i++){
  excls[i].addEventListener('click', function(){
    selectElmCnt(this);
  });
}
</script>
- Demo (click on these texts):
Click to select - Simple Div
Content in PRE tag
Another Div with same class
Content in a blockquote html tag.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Select the Content of HTML Element

Last accessed pages

  1. Get and Modify content of an Iframe (32494)
  2. The Mastery of Love (7690)
  3. Download HTM resources (90)
  4. HTML5 Quick Tutorial (5041)
  5. Styling HTML table with CSS (412)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (715)
  2. CSS cursor property - Custom Cursors (94)
  3. Read Excel file data in PHP - PhpExcelReader (71)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (67)
  5. PHP Unzipper - Extract Zip, Rar Archives (53)