Develop Reference

Check if cursor is end of input text

What I am trying to do is when I put the email address like test#example.com, test#example.co.uk, etc, and I hit on the space, I want to check that if the cursor is at the end of the input text before I could add HTML in the element.
if (selectionEndofText) {
if (e.which == 32) {
$('#oI').append('<div class="vR"><span class="vN" data-hovercard-name="'+name+'" data-hovercard-email="'+email+'" data-hovercard-owner-id="137"><div class="vT">'+name+'</div><div class="vM"></div></span><input name="to" type="hidden" value="<'+name+'>"></div>');
$('.vR').insertBefore('#domodal_email_receipt');
$('#domodal_email_receipt').val('');
}
}
Full code:
$(document).on('keydown', '#domodal_email_receipt', function(e) {
var fullname = $(this).val();
var name = fullname.split(' <');
var selectionEndofText = $(this).val().length;
var name = name[0];
var email = '';
if (fullname.indexOf('<') > -1) {
email = fullname.split('<');
email = email[1].replace('>', '');
}
alert("selectionEndofText................."+selectionEndofText);
//if (!selectionEndofText)
if (e.which == 32) {
$('#oI').append('<div class="vR"><span class="vN" data-hovercard-name="'+name+'" data-hovercard-email="'+email+'" data-hovercard-owner-id="137"><div class="vT">'+name+'</div><div class="vM"></div></span><input name="to" type="hidden" value="<'+name+'>"></div>');
$('.vR').insertBefore('#domodal_email_receipt');
$('#domodal_email_receipt').val('');
}
});

In addition to checking space keyword in the if statement, you can also check the caret position with .selectionStart that returns a number. So, if the current position is equal to the length, that means it is in the end of the input.
To clear the input, use a setTimeOut to make it run last. Otherwise, there will be a space inside it.
if (e.which == 32 && selectionEndofText === this.selectionStart) {
$('#oI').append('<div class="vR"><span class="vN" data-hovercard-name="'+name+'" data-hovercard-email="'+email+'" data-hovercard-owner-id="137"><div class="vT">'+name+'</div><div class="vM"></div></span><input name="to" type="hidden" value="<'+name+'>"></div>');
$('.vR').insertBefore('#domodal_email_receipt');
setTimeout(function(){
$('#domodal_email_receipt').val('');
}, 0);
}

Need to limit the comma(,) entered in textbox

I need to place a limit for the number of commas entered in the text area
I tried these links but it dint help
Limit the number of commas in a TextBox
The comma in the textBox
Iam using php. Is it possible to implement php or javascript here.

You should wait for DOMContentLoaded event, and afterwards bind the textarea with a callback for the "input" event:
const MAX_COMMAS = 3;
document.addEventListener("DOMContentLoaded", function(event) {
let textarea = document.getElementById('textbox');
textarea.addEventListener("input", function(event) {
let matchCommas = this.value.match(/,/g);
if (Array.isArray(matchCommas) && matchCommas.length > MAX_COMMAS) {
this.value = this.value.substring(0, this.value.length - 1); // remove the last comma
alert("MAX COMMAS EXCEEDED!");
}
});
});
<textarea id="textbox" cols="40" rows="4"></textarea>

HTML:
<textarea id="textarea" rows="20"></textarea>
JavaScript:
var textarea = document.getElementById('textarea');
var maxCommas = 5;
var filterCommas = function(event) {
var textCommas = this.value.match(/[,]/g);
if(textCommas.length >= maxCommas && event.key === ',') {
event.preventDefault();
return false;
}
}
textarea.onkeydown = filterCommas;
textarea.onkeypress = filterCommas;
textarea.onchange = filterCommas;`
https://jsfiddle.net/xL04qb8c/2/

How to use javascript to validate the input field for restricting numbers only and setting the range as maximum and minimum

On event change the overflow value must get rejected.
I have an input box in my form, where I want to restrict the user to enter only the numbers between 0 and 99999 only. But I don't want to disable the tab button functionality. The below code is working fine for "NUMBERS only" but it won't allow to use Tab button as well. Also it's not checking the overflow condition if someone enters number bigger than 99999.
<script>
function myIdFunction() {
var txt = "";
if (document.getElementById("EmpId").validity.rangeOverflow) {
txt = "Value too large";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
<input type="text" name="id" id="EmpId" ng-model="EmpId" max="99999"
onchange="myIdFunction()" onkeypress="return IsNumeric(event);"
ondrop="return false;" onpaste="return false;" ng-disabled="!edit"
placeholder="EmpId" required>
<span id="error" style="color: Red; display: none">* Input digits (0 -)</span>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) ||
specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
</script>

<input type=number min=0 max=99999>
Brought to you by:
For the specification see:
WHATWG HTML, section 4.10.5.1.13
For supported browsers see:
Can I use: Number input type
The Current State of HTML5 Forms: The min, max, and step Attributes
For older browsers use:
number-polyfill
(A polyfill for implementing the HTML5 <input type=number> element in browsers that do not currently support it.)
Live enforcement of correct values
If you don't want the user to be able to enter incorrect values while typing:
var last = '';
input.addEventListener('input', function () {
if (this.checkValidity()) {
last = this.value;
} else {
this.value = last;
}
});
See: DEMO.

Pasting multiple numbers over multiple input fields

I've got a form on my site using 6 input fields. The site visitor simply enters a 6 digit code into these 6 boxes. The thing is that they'll get the 6 digit code and it would be ideal to allow them to simply copy the 6 digit code we send them into these input fields by simply putting pasting into the first input field and having the remaining 5 digits go into the remaining 5 input fields. It would just make it much easier than having to manually enter each digit into each input field.
Here's the code we're currently using, but it can easily be changed to accomplish what is described above:
<input type="text" maxlength="1" class="def-txt-input" name="chars[1]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[2]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[3]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[4]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[5]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[6]">
I saw a posting similar to this here: Pasting of serialnumber over multiple textfields
But it doesn't have the solution I'm looking for. Ideally this could be pulled off using jQuery or plain JavaScript.

Edit
I didn't like the timer solution I used in the paste event and the complexity of just using the input or paste event.
After looking at this for a while I added a solution which uses a hybrid between the 2.
The code seems to do all that is required now.
The Script:
var $inputs = $(".def-txt-input");
var intRegex = /^\d+$/;
// Prevents user from manually entering non-digits.
$inputs.on("input.fromManual", function(){
if(!intRegex.test($(this).val())){
$(this).val("");
}
});
// Prevents pasting non-digits and if value is 6 characters long will parse each character into an individual box.
$inputs.on("paste", function() {
var $this = $(this);
var originalValue = $this.val();
$this.val("");
$this.one("input.fromPaste", function(){
$currentInputBox = $(this);
var pastedValue = $currentInputBox.val();
if (pastedValue.length == 6 && intRegex.test(pastedValue)) {
pasteValues(pastedValue);
}
else {
$this.val(originalValue);
}
$inputs.attr("maxlength", 1);
});
$inputs.attr("maxlength", 6);
});
// Parses the individual digits into the individual boxes.
function pasteValues(element) {
var values = element.split("");
$(values).each(function(index) {
var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
$inputBox.val(values[index])
});
};​
See DEMO

Here is an example of a jquery plugin that does the same thing as the original answer only generalized.
I went to great lengths to modify the original answer ( http://jsfiddle.net/D7jVR/ ) to a jquery plugin and the source code is here: https://github.com/relipse/jquery-pastehopacross/blob/master/jquery.pastehopacross.js
An example of this on jsfiddle is here:
http://jsfiddle.net/D7jVR/111/
The source as of 4-Apr-2013 is below:
/**
* PasteHopAcross jquery plugin
* Paste across multiple inputs plugin,
* inspired by http://jsfiddle.net/D7jVR/
*/
(function ($) {
jQuery.fn.pastehopacross = function(opts){
if (!opts){ opts = {} }
if (!opts.regexRemove){
opts.regexRemove = false;
}
if (!opts.inputs){
opts.inputs = [];
}
if (opts.inputs.length == 0){
//return
return $(this);
}
if (!opts.first_maxlength){
opts.first_maxlength = $(this).attr('maxlength');
if (!opts.first_maxlength){
return $(this);
}
}
$(this).on('paste', function(){
//remove maxlength attribute
$(this).removeAttr('maxlength');
$(this).one("input.fromPaste", function(){
var $firstBox = $(this);
var pastedValue = $(this).val();
if (opts.regexRemove){
pastedValue = pastedValue.replace(opts.regexRemove, "");
}
var str_pv = pastedValue;
$(opts.inputs).each(function(){
var pv = str_pv.split('');
var maxlength;
if ($firstBox.get(0) == this){
maxlength = opts.first_maxlength;
}else{
maxlength = $(this).attr('maxlength');
}
if (maxlength == undefined){
//paste them all!
maxlength = pv.length;
}
//clear the value
$(this).val('');
var nwval = '';
for (var i = 0; i < maxlength; ++i){
if (typeof(pv[i]) != 'undefined'){
nwval += pv[i];
}
}
$(this).val(nwval);
//remove everything from earlier
str_pv = str_pv.substring(maxlength);
});
//restore maxlength attribute
$(this).attr('maxlength', opts.first_maxlength);
});
});
return $(this);
}
})(jQuery);

This shouldn't be too difficult ... add a handler for the paste event on the first input, and then process per the requirement.
Edit
Actually this is much trickier than I thought, because it seems there's no way to get what text was pasted. You might have to kind of hack this functionality in, using something like this (semi-working)... (see the JSFiddle).
$(document).on("input", "input[name^=chars]", function(e) {
// get the text entered
var text = $(this).val();
// if 6 characters were entered, place one in each of the input textboxes
if (text.length == 6) {
for (i=1 ; i<=text.length ; i++) {
$("input[name^=chars]").eq(i-1).val(text[i-1]);
}
}
// otherwise, make sure a maximum of 1 character can be entered
else if (text.length > 1) {
$(this).val(text[0]);
}
});

HTML
<input id="input-1" maxlength="1" type="number" />
<input id="input-2" maxlength="1" type="number" />
<input id="input-3" maxlength="1" type="number" />
<input id="input-4" maxlength="1" type="number" />
jQuery
$("input").bind("paste", function(e){
var pastedData = e.originalEvent.clipboardData.getData('text');
var num_array = [];
num_array = pastedData.toString(10).replace(/\D/g, '0').split('').map(Number); // creates array of numbers
for(var a = 0; a < 4; a++) { // Since I have 4 input boxes to fill in
var pos = a+1;
event.preventDefault();
$('#input-'+pos).val(num_array[a]);
}
});

You're going to have to right some custom code. You may have to remove the maxlength property and use javascript to enforce the limit of one number per input.
As dbasemane suggests, you can listen for a paste event. You can listen to keyup events too to allow the user to type out numbers without having to switch to the next input.
Here is one possible solution:
function handleCharacter(event) {
var $input = $(this),
index = getIndex($input),
digit = $input.val().slice(0,1),
rest = $input.val().slice(1),
$next;
if (rest.length > 0) {
$input.val(digit); // trim input value to just one character
$next = $('.def-txt-input[name="chars['+ (index + 1) +']"]');
if ($next.length > 0) {
$next.val(rest); // push the rest of the value into the next input
$next.focus();
handleCharacter.call($next, event); // run the same code on the next input
}
}
}
function handleBackspace(event) {
var $input = $(this),
index = getIndex($input),
$prev;
// if the user pressed backspace and the input is empty
if (event.which === 8 && !$(this).val()) {
$prev = $('.def-txt-input[name="chars['+ (index - 1) +']"]');
$prev.focus();
}
}
function getIndex($input) {
return parseInt($input.attr('name').split(/[\[\]]/)[1], 10);
}
$('.def-txt-input')
.on('keyup paste', handleCharacter)
.on('keydown', handleBackspace);
I have this code set up on jsfiddle, so you can take a look at how it runs: http://jsfiddle.net/hallettj/Kcyna/

Small modification to the limit of a textarea characters counter

The code below counts the chars typed in a textarea. If you reach the 250 limit you can not add more. How can I let people to type more than 250?
Like ok, you have 250 minimum but it doesn't mind if you put more than this. Thanks!
<script type='text/javascript'>
var maxLength=250;
function charLimit(el) {
if (el.value.length > maxLength) return false;
return true;
}
function characterCount(el) {
var charCount = document.getElementById('charCount');
if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
if (charCount) charCount.innerHTML = maxLength - el.value.length;
return true;
}
</script>
<form>
<textarea onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)" rows="8" cols="40"></textarea>
</form>
<p><strong><span id="charCount">250</span></strong> more characters available.</p>

To allow the number of characters entered to exceed the maxLength, the following blocks of code should be removed.
function charLimit(el) {
if (el.value.length > maxLength) return false;
return true;
}
and
if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
and
onKeyPress="return charLimit(this)"
You might also want to consider modifying the following line to prevent displaying negative numbers.
if (charCount) charCount.innerHTML = Math.max(maxLength - el.value.length, 0);

change this line:
var maxLength=250;
change it to whatever max you want

the maxLength is beeing restricted by a var named "maxLength"
If you change that value you can change the max value required, because of all that comprobations that you're making