We Keep Coding

Function to disable a button if a given input text doesn't contain at least n characters

I need help with this function
function block_button(min){
current=$(this).val().length;
if(current>=min){
$(this).next().css('opacity','1');
}else{
$(this).next().css('opacity','0.5');
}
}
$('input').keyup(function(){
block_button.apply(4,this);
});
The purpose of the function is to count the length of the string while user writes and then disable or enable the button below (I changed only the opacity so this is a "visual" disable but it's intended).
The function has a number for parameter and this is the minimum string length to enable the button. The problem is that nothing happens when I reach 4 characters.
How would I be able to fix this?

You cannot use $(this) directly inside a function. Instead you should put it inside a variable before you call the function, and then use that variable inside the function:
function block_button(min){
current=$this.val().length;
if(current>=min){
$this.next().css('opacity','1');
}else{
$this.next().css('opacity','0.5');
}
}
$('input').keyup(function(){
$this = $(this);
block_button(4);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text">
<button>Button</button>
You should instead have the button disabled by default, and then if the user enters more than X characters in the input-field, have the disabled attribut removed. If the user then deletes characters, add the attribute back again:
function disableButton(min) {
current = $this.val().length;
if (current >= min) {
$this.next().removeAttr("disabled");
} else {
$this.next().attr("disabled", "");
}
}
$('input').keyup(function() {
$this = $(this);
disableButton(4);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text">
<button disabled>Button</button>

https://jsfiddle.net/ugeshgupta000/5grrzdnn/1/
function block_button(elem, min){
current=elem.val().length;
if(current>=min){
elem.next().css('opacity','1');
}else{
elem.next().css('opacity','0.5');
}
}
$('input').keyup(function(){
block_button($(this), 4);
});

maxlength of input tag with type=text using html5 in android webview not working

i am able to enter more than specified maxlength of input tag with type=text using html5 in android webview. when lost focus/ blur, value will be trimmed to maxlength.
for example
<input type="text" maxlength="5" id="hahaha">
value entered = abcdefghij
on blur/lostfocus value displayed = abcde.
is there anyway that restricts the user from entering more characters than maxlength rather than trimming content after user entered the content . In IOS it is working fine.

This problem probably is a bug in Android 4.1 version as you can see here 35264.
You can solve that with some Javascript:
<input type="text" maxlength="3" id="hahaha" onkeypress="if(this.value.length >= this.getAttribute('maxlength') return false;" />
or JQuery:
$(function() {
max_length = Number($("#hahaha").attr("maxlength"));
$("#hahaha").attr("onkeypress", "if(this.value.length >= max_length) return false;");
});

A bit late to the party, but as neliojrr mentioned you can correct this using javascript/jquery. However, I would be very tempted to make this much more generic:
$('input[maxlength]').on('keydown', function(event) {
var $this = $(this);
if ($this.val().length > parseInt($this.attr('maxlength'), 10)) {
event.preventDefault();
}
});

Thanks #paddybasi it worked for me. Just one small correction. keydown event doesn't seem to be working in android. So we need to change the event to "textInput".
$('input[maxlength],textarea[maxlength]').on('textInput', function (event) {
var $this = $(this);
if ($this.val().length >= parseInt($this.attr('maxlength'), 10)) {
event.preventDefault();
}
});

After regular expression overwrite text in a html input field

I have several input fields that I need to filter the input on.
I've put them in a class and used a regular expression to limit the characters to numbers, letters, and underscore.
That works fine, but when I tab from one input field to the next, the cursor moves to the end of the input text. I want it to be highlighted so that it can be typed over if desired instead of having to highlighting it with the mouse first.
<input type="input" class="jqfc" value="one"><br>
<input type="input" class="jqfc" value="two"><br>
<input type="input" class="jqfc" value="three"><br>
<input type="input" value="highlights"><br>
jQuery('.jqfc').keyup(function () {
this.value = this.value.replace(/[^a-z0-9\_]/gi, "");
});
sample:
http://jsfiddle.net/ngwr6/2/

jQuery('.jqfc').keyup(function (e) {
if (e.keyCode !== 9){
this.value = this.value.replace(/[^a-z0-9\_]/gi, "");
}
});
This way it wont run the logic if the tab key is pressed. I thought of doing something like select(), but then that happens every time you type.

This ought to do the trick:
jQuery('.jqfc').keyup(function () {
var regex = /[^a-z0-9\_]/gi;
if(this.value.match(regex)){
this.value = this.value.replace(regex, "");
}
});
jQuery('.jqfc').on('focus, click', function(){
this.select();
});
http://jsfiddle.net/ngwr6/5/

Restrict characters in input field

Is there a way to block users from writing specific characters in input fields? I tried the code below, but when a user enters disallowed characters, they appear for a brief period before disappearing. I want the input to remain unchanged when invalid characters are written.
I want to use onchange because other restriction methods do not seem to work on mobile devices. The problem I want to solve is that characters appear briefly before being removed.
function checkInput(ob) {
const invalidChars = /[^0-9]/gi;
if(invalidChars.test(ob.value)) {
ob.value = ob.value.replace(invalidChars, "");
}
};
<input class="input" maxlength="1" onChange="checkInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

you can use try this,
$('.input').keyup(function () {
if (!this.value.match(/[0-9]/)) {
this.value = this.value.replace(/[^0-9]/g, '');
}
});
SEE THIS FIDDLE DEMO
Updated :
You can try this Code,
$(document).ready(function() {
$(".input").keydown(function (e) {
// Allow: backspace, delete, tab, escape and enter
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
SOURCE
SEE UPDATED FIDDLE DEMO
UPDATED FOR ANDROID:
<EditText
android:id="#+id/editText1"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_marginTop="58dp"
android:layout_toRightOf="#+id/textView1"
android:maxLength="1" >
</EditText>
I think it may help you... using android:inputType="number" you can do that.

A combination of keypress and paste events does a trick:
var text = document.getElementById('text');
text.onkeypress = text.onpaste = checkInput;
function checkInput(e) {
var e = e || event;
var char = e.type == 'keypress'
? String.fromCharCode(e.keyCode || e.which)
: (e.clipboardData || window.clipboardData).getData('Text');
if (/[^\d]/gi.test(char)) {
return false;
}
}
<input class="input" maxlength="10" id="text" type="text" autocomplete="off" />
This code prevents from typing or pasting anything but a number. Also no blinking and invalid characters don't show up.
Works in IE7+.
Demo: http://jsfiddle.net/VgtTc/3/

All answers given so far suffer from at least one of the following accessibility issues:
They validate key codes, which does not work with non-QWERTY keyboard layouts.
They do not cover all input methods; especially drag&drop is often forgotten.
They alter the value, which resets the position of the caret.
They use the pattern attribute, but this does not provide feedback until the form is submitted.
Wouldn't it be a much better idea to actually validate the input before it's inserted?
The beforeinput event fires before the input's value is changed. The event has a data property which describes the content that the user wants to add to the input field. In the event handler, you simply check the data attribute, and stop the event chain if it contains disallowed characters.
We end up with the following very simple, very short code.
const input = document.getElementById("input");
const regex = new RegExp("^[0-9]*$");
input.addEventListener("beforeinput", (event) => {
if (event.data != null && !regex.test(event.data))
event.preventDefault();
});
<label for="input">Enter some digits:</label>
<input id="input" />
Some closing notes:
Accessibility: Provide a clear explanation of what input format is expected from the user. For example, you can use the title attribute of the input to show a tooltip explaining the expected format.
Security: This is client-side validation, and does not guarantee that the pattern is enforced when the form is sent to a server. For that, you'll need server-side validation.

Here's a little hack you could try: DEMO
What it does is that it colors every input text white and then changes it back to black if it suits your requirements. If you could live with the bit of lag that occurs when you enter a valid character.
function checkInput(ob) {
var invalidChars = /[^0-9]/gi
if (invalidChars.test(ob.value)) {
ob.value = ob.value.replace(invalidChars, "");
}
else {
document.getElementById('yourinput').style.color = '#000';
}
};
function hideInput(ob) {
document.getElementById('yourinput').style.color = '#FFF';
};
html
<input id="yourinput" class="input" maxlength="1" onKeydown="hideInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />
css
input {color:#FFF;}

check this code,
$('.input').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
​

<input id="testInput"></input>
<script>
testInput.onchange = testInput.oninput = restrict;
function restrict() {
testInput.value = testInput.value.replace(/[^a-z]/g, "");
}
</script>
I came up with something slightly different. oninput instead of onkeyup/onkeydown, and onchange instead of onpaste.

I restrict invalid characters on both keypress and paste events like:
<input type="text" onkeydown="validateKey(event)" onpaste="validatePaste(this, event)">
And define functions to handle these events inside tab or a separate javascript file:
<script>
function validateKey(e) {
switch(e.keyCode) {
case 8,9,13,37,39:
break;
default:
var regex = /[a-z .'-]/gi;
var key = e.key;
if(!regex.test(key)) {
e.preventDefault();
return false;
}
break;
}
}
function validatePaste(el, e) {
var regex = /^[a-z .'-]+$/gi;
var key = e.clipboardData.getData('text')
if (!regex.test(key)) {
e.preventDefault();
return false;
}
}
</script>

keyup Uppercase on event

I would like to have an input that would change to upper case on keyup. So I attach a simple event on keyup.
HTML
<input id="test"/>
Javascript (with jQuery)
$("#test").keyup(function(){
this.value = this.value.toUpperCase();
});
But I found that in Chrome and IE, when you push left arrow, the cursor automatically move to end. I notice that I should detect if the input is letter only. Should I use keycode range or regexp for detection?
Example: http://jsbin.com/omope3

Or you can use the following (this is probably faster and more elegant):
<input style="text-transform: uppercase" type='text'></input>
But that sends the as-typed value back in the form data, so use either of the following to store it as all-caps in the database:
MySQL: UPPER(str)
PHP: strtoupper()

Another solution, if you use the text-transform: uppercase; css property:
<input id='test' style='text-transform: uppercase;' type='text'></input>
And with jQuery help you choose the blur event:
$("#test").blur(function(){
this.value = this.value.toUpperCase();
});
With this solution, you don't have to upper the database fields, you can use the cursor for movement and the user can insert/rewrite the text in the input field.

Use this:
<input onkeyup="MakeMeUpper(this)" type="text"/>
And in your JS Code Part put:
function MakeMeUpper(f, e){
var actualValue = f.value;
var upperValue = f.value.toUpperCase();
if( actValue != upperValue){
f.value = upperValue;
}
}
This code won't change the text if the user entered something that is not text (left or right arrow).

Yeah, looks like some browsers move the cursor to the end when the value gets updated. You could do this:
$("#test").keyup(function(){
var upper = this.value.toUpperCase();
if (this.value != upper)
this.value = upper;
});
which will only change the value if it needs to be changed. However, that still leaves you with the problem that if you type abd, move left, hit c to get abcd, the cursor will still get moved to the end.

Javascript (with jQuery)
$("#test").keyup(function(){
$(this).val($(this).val().toUpperCase());
});

var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
$(this).val(str);
}

You probably want to look at keyCode in your keyup function.
var UP_ARROW = 38,
DOWN_ARROW = 40;
$('#test').keyup(function(evt){
if (evt.keyCode == UP_ARROW)
{
this.value = this.value.toUpperCase();
}
if (evt.keyCode == DOWN_ARROW)
{
this.value = this.value.toLowerCase();
}
});