We Keep Coding

How to block user type some characters to input?

I have a web app there is an input user can add some names in it but I don't want user to enter apostrophe ' sign. when user presses the ' sign html don't have to insert the character. I am new with html, also I have the js code file.
<div class="col-md-4">
<input name="name" type="text" class="form-control" placeholder="Name">
</div>

You can replace the character from the value with empty character. I will also recommend you to use some other name for the control as name is a keyword in JavaScript:
document.querySelector('[name=txtName]').addEventListener('input',function(){
this.value = this.value.replace("'", '');
});
<div class="col-md-4">
<input name="txtName" type="text" class="form-control" placeholder="Name">
</div>

Try this:
document.getElementById("input").onkeypress = function(e) {
/^[a-zA-Z0-9]+$/.test(this.value)
};
<input type="text" id="input">
Change the regex to match the characters you want, currently only letters (lowercase and uppercase) and numbers.
Code from How to block special characters in HTML input field?

var digitsOnly = /[1234567890]/g;
var floatOnly = /[0-9\.]/g;
var alphaOnly = /[A-Za-z]/g;
function restrictCharacters(myfield, e, restrictionType) {
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if they pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if they are press other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
return true;
} else {
return false;
}
}
}

Unable to manually trigger keydown event with jquery

<form>
<div id="part-inputs">
<div class="part-input">
<label>Part 1</label>
<input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
<input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
</div>
</div>
<input type="submit" name=submit>
</form>
<script>
var nextPartNo = 2;
var template = '<div class="part-input">' +
'<label>Part <%= partNo %></label>' +
'<input type="number" class="start" name="s[<%= partNo -1 %>]" value="" placeholder="start time" tabindex="<%= (partNo-1)*2+1 %>">' +
'<input type="number" class="finish" name="f[<%= partNo -1 %>]" value="" placeholder="finish time" tabindex="<%= (partNo-1)*2+2 %>">' +
'</div>';
var compiledTemplate = _.template(template);
// check for tab keydown at finish field
$("#part-inputs").on('keydown', '.finish', function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 9) { // tab key
var $partInputTargeted = $(event.target.parentElement); // div#part-input
if (!$partInputTargeted.is(':last-child')) {
return;
}
$("#part-inputs").append(compiledTemplate({
partNo: nextPartNo
}));
nextPartNo++;
}
});
// check for enter key at both fields
$("#part-inputs").on('keydown', ['.start', '.finish'], function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 13) { // enter key
console.log("here"); // this verifies we reach the block where we trigger jquery event
event.preventDefault();
var e = jQuery.Event("keydown");
e.which = e.keyCode = 9; // Create tab key event
$(event.target).trigger(e);
}
});
</script>
Above is a snippet of the dynamic form, I am creating. There are multiple units of a start field and a finish field. Each unit is a div#part-input. All div#part-input divs are children of div#part-inputs.
On tab event triggered at finish field of last div#part-input, a new div#part-input will be appended. I am compiling the template using underscore.js( This working as expected)
Now I want enter key at any of the fields(start or finish) to trigger tab event on the same . This where code is not doing anything.

First of all looks like there is a typo in your submit button, missing the quotes around the name prop.
Try this, it should work for what you are looking for. It will trigger if the enter key is pressed while in a finished input. I took out our template adding to it's own function so you can call it in multiple places.
function addTemplate() {
var $partInputTargeted = $(event.target.parentElement); // div#part-input
if (!$partInputTargeted.is(':last-child')) {
return;
}
console.log('add new template');
}
$("#part-inputs .start, #part-inputs .finish").keydown(function (event) {
if (event.which === 13) {
event.preventDefault();
var index = $('input').index(this) + 1;
$('input').eq(index).focus();
if($(this).attr('class') === 'finish') {
addTemplate();
}
}
});
// check for tab keydown at finish field
$("#part-inputs").on('keydown', '.finish', function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode == 9) { // tab key
addTemplate();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="part-inputs">
<div class="part-input">
<label>Part 1</label>
<input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
<input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
</div>
</div>
<input type="submit" name="submit" />
</form>

If I understand it correctly you want to change focus on next input when user presses enter key. Why don't you directly set the focus with javascript? There is no need to fake keyboard events.
This snippet should help you:
$('input,select').keydown( function(e) { // Add event listener
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) { // If enter key
e.preventDefault();
var inputs = {YOUR INPUTS} // $('.YOUR-SEELCTOR-CLASS').find(':input:visible');
var nextinput = 0;
// Find next input
if (inputs.index(this) < (inputs.length-1)) {
nextinput = inputs.index(this)+1;
}
// Handle input focus
if (inputs.length==1) {
$(this).blur().focus();
} else {
inputs.eq(nextinput).focus();
}
}
});

Textbox numeric with still character e input and negative integers with javascript

I have a textbox with numeric inputs. Here is my javascript set to numeric textbox. But when I try to input letters, "e" is allowed. Problem: What I want to do is no letter should be allowed, only numeric numbers and no negative integer.
HTML:
<input type="numeric" id="usrid" name="usrid" placeholder="Enter number">
Javascript:
$(document).ready(function() {
$("#usrid").numeric();
});

You can use the type="number" and min=0 attributes in your input to enforce validation on these fields:
<input type="number" id="usrid" name="usrid" min=0 placeholder="Enter number">
However, this won't prevent input of negative or non-numeric characters into the input field. For that you'll need to bind a javascript event:
$('#usrid').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});

you can try this
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
in this page you can find more example about of limit of number, in html
http://www.w3schools.com/tags/att_input_max.asp

If you want to take only the number input then input type should be number like following
<input type="number" id="usrid" name="usrid" placeholder="Enter number">
but it takes the letter 'e' which is stands for exponential value.Better you have try the following which use js to validate the input using on 'keypress'
HTML code:
<input type="input" id="usrid" name="usrid" placeholder="Enter number">
JavaScript Code:
<script type="text/javascript">
$(document).ready(function() {
$('[id^=usrid]').keypress(validateNumber);
});
function validateNumber(e) {
var key = window.e ? e.keyCode : e.which;
if (e.keyCode === 8 || e.keyCode === 46
|| e.keyCode === 37 || e.keyCode === 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
</script>

Insert text after "this" input-element with javascript?

Code:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">
Is this possible to do without putting an ID or name on this element?
Or without encasing it in an identifiable div?
To clarify, this should be the result html after the event keycode is pressed:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">OK

If you want to use jQuery you can do the following:
HTML
<input name="ok" type="text" id="showOK" />
JAVASCRIPT
$("#showOK").keypress(function() {
if (event.keyCode == 13){
$("<p>OK</p>").insertAfter("#showOK");
}
});
Without the Use of ID
<input type="text" onkeydown="if (event.keyCode == 13) { $('<p>OK</p>').insertAfter(this);}">

Following your requirements and trying to keep your style, you can use the insertAdjacentHTML DOM Element method to add a text just after the input element.
<input type="text" onkeydown="
if (event.keyCode == 13) { this.insertAdjacentHTML('afterend', 'OK');}
">
See demo

I used a mixture of answers here.
First off i had to create a new var:
var that = this;
Or else javascript could not find "this" somehow.
Then used the jQUery method:
$('<span>OK</span>').insertAfter(that);
Resulting in:
<input type="text" onkeydown="
if (event.keyCode == 13) { var that = this; $('<span>OK</span>').insertAfter(that); }
">

Ok, first off, don't use inline-js. But to answer your question,
<input type="text" onkeydown="
if (window.event.keyCode == 13) { this.outerHTML = this.outerHTML + 'Ok'; } "/>
DEMO

Try this:
<input type="text" onkeydown="(function(event){
var input = event.target;
if(event.keyCode == 13){
input.outerHTML += 'OK';
}
})(window.event);" />
Demo.

<input type="text" onkeydown="ok(this, event)"/>
function ok(el, event) {
var _ok = document.createElement('span');
_ok.textContent = 'ok';
if (event.which == 13) {
el.parentNode.insertBefore(_ok, el.nextSibling)
}
}

Try this:
<input type="text" onkeydown="
if (event.keyCode == 13) { this.parentNode.insertBefore(document.createTextNode('OK'), this.nextElementSibling); }
">
It will add a text node (without creating any span or div) directly after the input.

Javascript to check input value

I am looking for a javascript function that when using onblur it validates that the text input is a number only with no decimal points or special characters. I have been able to find a few things, but none of them have worked thus far.
Here's what I have for the input fields:
<tr>
<td width="312"><strong>Cash on Hand</strong></td>
<td width="188">$
<input type="text" onchange="updateassets()" value="0" maxlength="11" name="CashOnHand" /></td>
Any help would be greatly appreciated.

Use below method onKeyUp event, this will not allow any characters on input field
function numericOnly(e)
{
var val = e.value.replace(/[^\d]/g, "");
if(val != e.value)
e.value = val;
}
Input field code
<input type="text" onchange="updateassets()" onKeyUp="numericOnly(this)" value="0" maxlength="11" name="CashOnHand" />

I like to separate the structure (HTML) from the function (JS). That's why there's no "onchange" attribute in the input element.
HTML
<input type="number" name="cashOnHand" value="0" maxlength="11" />
JS
function checkInputInteger() {
// Check if the input value is an integer
if (this.value == parseInt(this.value)) {
// The value is an integer
console.log('Input ' + this.name + ' is an integer');
}
else {
// The value is not an integer
console.log('Input ' + this.name + ' is not an integer');
}
}
// Get the input from DOM (getElementsByName returns a list)
input = document.getElementsByName('cashOnHand')[0];
// Bind the blur event to checkInputInteger
input.addEventListener('blur', checkInputInteger, false);

HTML
<form>
<input type="text" id="txt" />
</form>
JS
(function(a) {
a.onkeypress = function(e) {
if (e.keyCode >= 49 && e.keyCode <= 57) {}
else {
if (e.keyCode >= 97 && e.keyCode <= 122) {
alert('Error');
// return false;
} else return false;
}
};
})($('txt'));
function $(id) {
return document.getElementById(id);
}
Hope it helps you

Given:
<input onchange="updateassets()" value="0" ...>
you can make life easier by passing a reference to the element to the function using this:
<input onchange="updateassets(this)" value="0" ...>
and the validation function can be:
function validateIsInteger(element) {
if (/\D/.test(element.value)) {
// the element value contains non–digit values
} else {
// the element value is only digits
}
}
Using the change event is a good idea, as if the value hasn't changed, you don't need to check it.