html: Onfocus, onblur, onkeypress is not working when used innerhtml while creating row for table

blur() not working
difference between onfocus and onblur
typescript blur event
textfield onblur
asp onblur
button onblur
textarea onblur
div onblur

I am trying to add a row to my table with each cell having an input of type text. But

Onfocus, onblur, onkeypress

are not working on the inputs of the newly created row. Following is my javascript code to add a row to the table:

function Addrow(){  
    var table = document.getElementById("myTable");
    var row = table.insertRow(3);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);

    cell1.innerHTML =
        '<td><input type="text" class="form-control" name="cell1' 
        + counter + '" id="cell1' + counter + '" value="0.0" '
        + ' onfocus="this.value = this.value=="0.0"?"":this.value;" 
        onblur="this.value = this.value==""?"0.0":this.value;"
        onkeypress="return isNumberKey(event)" /></td>';
    cell2.innerHTML = 
        '<td> <input type="text" class="form-control" name="cell2'
        + counter + '" id="cell2' + counter + '" value="0.0"'
        + ' onfocus="this.value = this.value=="0.0"?"":this.value;" 
        onblur="this.value = this.value==""?"0.0":this.value;" 
        onkeypress="return isNumberKey(event)" /></td>';
    cell3.innerHTML = '<td> <input type="text" class="form-control" name="cell3' 
        + counter + '" id="cell3' + counter + '" value="0.0"'
        + ' onfocus="this.value = this.value=="0.0"?"":this.value;" 
        onblur="this.value = this.value==""?"0.0":this.value;" 
        onkeypress="return isNumberKey(event)" /></td>';
    return false;
}

Javascript function to check if input is number or not

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57) {
        alerts("Numbers or Decimal only!!!");
        return false;
    }
        return true;
    }

see code bellow:(it is not a bug but in js function called with first lower-case letter)

    function addRow(){  
        var table = document.getElementById("myTable");
        var row = table.insertRow(3);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
    var counter=0;
        cell1.innerHTML = '<input type="text" class="form-control" name="cell1' + counter + '" id="cell1' + counter + '" value="0.0" '+
                        'onfocus="focusData(this)" onblur="blurData(this)" onkeypress=" isNumberKey(event)" />';
        cell2.innerHTML = '<input type="text" class="form-control" name="cell2' + counter + '" id="cell2' + counter + '" value="0.0"' +
                              ' onfocus="focusData(this)" onblur="blurData(this)" onkeypress="isNumberKey(event)" />';
        cell3.innerHTML = ' <input type="text" class="form-control" name="cell3' + counter + '" id="cell3' + counter + '" value="0.0"' +
                              ' onfocus="focusData(this)" onblur="blurData(this)"  onkeypress="isNumberKey(event)" />';
       
    }
    function blurData(el) {
        el.value = el.value == '' ? "0.0" : el.value;
    }
    function focusData(el) {
        el.value = el.value == '0.0' ? '' : el.value;
    }
    <table id="myTable">
      <tr>
        <td>Row1 cell1</td>
        <td>Row1 cell2</td>
      </tr>
      <tr>
        <td>Row2 cell1</td>
        <td>Row2 cell2</td>
      </tr>
      <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
      </tr>
    </table>
    <button onclick="addRow()">Try it</button>

Focusing: focus/blur, html: Onfocus, onblur, onkeypress is not working when used innerhtml while creating row for table. Posted by: admin October 29, 2018 Leave a comment. Questions: I am trying to add a row to my table with each cell having an input of type text. But Onfocus, onblur, onkeypress are not working on the inputs of the newly created row. Following is my javascript code to add a row to the table: function Addrow(){ var table = document.getElementById("myTable"); var row


You should use addEventListener event delegation to dynamically created HTML

var formControlList = document.querySelectorAll('.form-control');
for (var i = 0; i < formControlList.length; i++) 
{
    formControlList[i].addEventListener('blur', function(event) 
    {
       
    });
}

JavaScript - Onblur Clearing Form, There's also an autofocus HTML attribute that puts the focus into an There are important peculiarities when working with focus events. The blur handler checks if the field the email is entered, and if not on focusing in the form -- add the class --> < form onfocus = " this. Click on a table cell to edit it. My understanding is that when the onBlur event fires the element is losing focus and thus the focus is being transferred to the new/next element. I have tried to playing around with the onfocus event, onkeypress events but still have not been successful. I am open to any ideal to get this done, I have spend way to much time on it as it is.


Instead of the onblur / onfocus / onkeypress, I'd just use placeholder="0.0" and type="number"

function addRow() {
  const table = document.getElementById('myTable')
  const row = table.insertRow()
  for (let i = 0; i < 3; i++) {
    const cell = row.insertCell(i)
    const input = document.createElement('input')
    input.type = 'number' // only accept numeric input
    input.placeholder = '0.0' // placeholder disappears when a value is entered
    input.className = 'form-control'
    input.name = `cell${i+1}${row.rowIndex+1}`
    cell.appendChild(input)
  }
}
<p><button onclick="addRow()" type="button">Add a row</button></p>

<table id="myTable">
</table>

JavaScript - Onblur Not Working, elementPW2.innerHTML = "Passwords do not match. Form Onfocus Function, Clearing Input Value, Also Clearing User Created Text Onblur Event Creating Problems With Form Validation How To Get Value Of Each Row Onblur In Javascript I'm trying to use onKeyUp and onBlur to validate html table field text entry. I have an onfocus event that makes a textarea large and then an onblur event that sets it back to a smaller textarea. If I click the textarea the onfocus event is triggered but if I go straight to submit the form the onblur event is triggered and the form is not submitted unless i hit submit twice.


The problem occurs because you used the quotes within quotes. To represent a " character inside an HTML attribute delimited by " characters, use the entity &quot; .

I'd recommend attaching event listeners using JavaScript rather then using intrinsic event attributes though. It simplifies things greatly.

Note however, that browsers will not execute JavaScript added to the document with innerHTML. If you want to add a script programmatically, the use createElement or appendChild or ...

function Addrow() {  
	var table = document.getElementById( 'myTable' ),
      row = table.insertRow(3),
		  cell1 = row.insertCell(0),
		  cell2 = row.insertCell(1),
		  cell3 = row.insertCell(2),
      counter = 1;

	cell1.innerHTML = '<td><input type="text" class="form-control" name="cell1' + counter + '" id="cell1' + counter + '" value="0.0" ' + ' onfocus="this.value = this.value==&quot;0.0&quot;?&quot;&quot;:this.value;" onblur="this.value = this.value==&quot;&quot;?&quot;0.0&quot;:this.value;" onkeypress="return isNumberKey( event )" /></td>';
	cell2.innerHTML = '<td> <input type="text" class="form-control" name="cell2' + counter + '" id="cell2' + counter + '" value="0.0"' + ' onfocus="this.value = this.value==&quot;0.0&quot;?&quot;&quot;:this.value;" onblur="this.value = this.value==&quot;&quot;?&quot;0.0&quot;:this.value;" onkeypress="return isNumberKey( event )" /></td>';
	cell3.innerHTML = '<td> <input type="text" class="form-control" name="cell3' + counter + '" id="cell3' + counter + '" value="0.0"' + ' onfocus="this.value = this.value==&quot;0.0&quot;?&quot;&quot;:this.value;" onblur="this.value = this.value==&quot;&quot;?&quot;0.0&quot;:this.value;" onkeypress="return isNumberKey( event )" /></td>';

	return false
}

function isNumberKey ( evt ) {
	var charCode = ( evt.which ) ? evt.which : evt.keyCode;

	if ( charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57 ) ) {
		alert( 'Numbers or Decimal only!!!' );
		return false;
	}

	return true;
}
<button onclick="Addrow()" type="button">Add a row</button>

<table id="myTable">
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

JavaScript Tutorial: The Basics, JavaScript - Onblur Not Working - Free JavaScript Tutorials, Help, Tips, Tricks, and More. I'm trying to use onKeyUp and onBlur to validate html table field text entry. I'm using Firefox in Windows XP, and Javascript is turned on. If invalid, should make table row background color yellow. function onKeyPress_Zip() { var​  Tip: The onfocus event is the opposite of the onblur event. Tip: The onfocus event is similar to the onfocusin event. The main difference is that the onfocus event does not bubble. Therefore, if you want to find out whether an element or its child gets the focus, you could use the onfocusin event.


Blur, Table of Contents (Hide). 1. 6.1 Creating an Object via Constructor and the new Operator 8.2 Manipulating Element's Content through the innerHTML Property With Node.js (in 2009), JavaScript can be used to program server-​side and build Run the script by loading the HTML file into a JavaScript-​enabled browser  The onblur event occurs when an object loses focus. The onblur event is most often used with form validation code (e.g. when the user leaves a form field). Tip: The onblur event is the opposite of the onfocus event. Tip: The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble.


Angular innerhtml not working, Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to  In the demo I’ve setup, you’ll see the existing list of items, give one or two a click and watch the text change and a nice icon appear. Voila! Now, the next step is to create your own element, which I’ve created a nice little script and small form to do exactly that. Simply type a word into the field input, and generate your element. The


HTMLTextAreaElement, Unlike innerText, inner HTML lets you work with HTML rich text and doesn't Bootstrap 4 modal popup with dynamic data on click on Bootstrap 4 table row. jQuery set innerText(), innerHTML(), textContent() jQuery can be used in But Onfocus, onblur, onkeypress are not working on the inputs of the newly created row. The method elem.focus() doesn’t work on them, and focus/blur events are never triggered. This can be changed using HTML-attribute tabindex. Any element becomes focusable if it has tabindex. The value of the attribute is the order number of the element when Tab (or something like that) is used to switch between them.