How to disable text when using placeholder?
jsfiddle
<input type="number" placeholder="Min.">
EDIT
The input number should allow the user to enter only numbers.
This stops the user from inputting any character which is not a number, while still allowing them to use non-printable keys (ctrl, alt, backspace, enter, etc.)
This first part is from this answer to a different question
The second part basically checks every time the user presses a key, to see if that key was...
Printable, and
Not a number
If both of these conditions are met, prevent the character from being entered.
// https://stackoverflow.com/a/12467610/4639281
function printable(keycode) {
var valid =
(keycode > 47 && keycode < 58) || // number keys
keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223); // [\]' (in order)
return !!valid;
}
// This part is me
document.getElementById('min').onkeydown = function(e) {
var char = String.fromCharCode(e.keyCode);
if(printable(e.keyCode) & isNaN(char)) {
e.preventDefault();
}
}
<input type="text" placeholder="Min." id="min">
The jquery numeric plugin did the trick. Thank you all for the help. I had to write more text because the answer should be 30 characters minimum.
$(document).ready(function(){
$(".numeric").numeric();
});
Related
Users of my Javascript data entry popup are unable to enter Extended Latin characters above 255. For instance Alt+0321 is the Polish Ł. Even on this StackOverflow form, I cannot key the character in but can copy-paste it. Whereas ß can be keyed directly because it is Alt+0223.
Is there a way round this limitation? Non-Javascript tools, such as MS Office, work. I'm having to advise people to do data entry in Word, then copy-paste, which is not a good look. Gmail and Google Search seem to be similarly limited.
After long search with no results, here's my solution:
(works for 0-65535 | 0000-ffff)
var altCapture = null;
function keydown(event) {
var keyCode = event.keyCode;
if(keyCode == 18) altCapture = "";
if(altCapture != null && keyCode != 18)
altCapture += (keyCode - 96);
}
function keyup(event) {
if(event.keyCode == 18) {
event.target.value += String.fromCharCode(+altCapture);
}
}
function keypress(event) {
if(altCapture != null) {
event.preventDefault();
altCapture = null;
}
}
<input
onkeydown ="keydown (event)"
onkeyup ="keyup (event)"
onkeypress ="keypress(event)"
>
<input
onkeydown ="keydown (event)"
onkeyup ="keyup (event)"
onkeypress ="keypress(event)"
>
key press is executed after all key ups.
key down 18 (alt), starts capture by setting altCapture to "" from null.
key down not 18 and capturing, appends digit to altCapture.
(key down not 18 and not capturing, default.)
key up 18, appends char from code altCapture (the + converts string to number).
(key up not 18, default.)
keypress and capturing, prevent default and reset altCapture to null.
(keypress and not capturing, default.)
I am validating a textbox that will allow only numeric values of fixed length. I have done workaround to allow certaing keys like backspace, delete, arrow keys etc and this is working fine.
I am not able to paste any text in the textbox as well as copy text from the textbox in Firefox. In chrome its working fine.
Here is the code I have written.
function validateTransactionId(event)
{
var transactionId = document.getElementById('transactionId').value;
var charCode = (event.which) ? event.which : event.keyCode;
// Allow: backspace, delete, tab, escape, enter
if ($.inArray(charCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
// Allow: home, end, left, right
(charCode >= 35 && charCode <= 39)) {
return true;
}
if ((charCode < 48 || charCode > 57))
return false;
if (transactionId.length == 11)
return false;
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Transaction ID" id="transactionId"
onkeypress="return validateTransactionId(event)" />
I want to enable copy paste in this textbox. Any help here will be much appreciated.
A few things to consider.
First, you may want to include the v character to account for Ctrl+V or Cmd+V for pasting.
if ($.inArray(charCode, [46, 8, 9, 27, 13, 110, 118]) !== -1
Secondly, if someone is pasting, the length may already be more than 11. So you need to change your if statement.
if (transactionId.length > 11) return false;
Third, if someone pastes a non-numeric string less than 11 characters, it will still accept it.
My suggestion would be instead of trying to validate individual key presses that you validate the value of the textbox. You can use a regular expression match to strip out non-numeric characters.
transactionId = transactionId.replace(/\D/g, "");
I have a javascript program that, in part, poses a division problem and asks for the quotient and remainder to be inserted in two different textboxes. The program in this instance looks like this:
!(C:\Users\Owen Walker\Dropbox (Personal)\Sebzo javascript\quotient_remainder.JPG)
For some reason--the program is fairly complicated--when both textboxes are visible, the user cannot Tab and Shift+Tab from one textbox to the other.
I have therefore written two functions: handleTabInQuotientTextbox() and handleShiftTabInRemainderTextbox(), that, when called in onkeyup from the quotient and remainder textboxes, set the focus on the other textbox. In other words, they do the right thing when Tab is pressed in the quotient textbox, i.e., the caret goes to the reminder textbox, and vice versa when the Shift+Tab keys are pressed in the remainder textbox. What's wrong is that one can no longer enter numbers or other text into the two textboxes.
Here is the code for the two functions:
function handleTabInQuotientTextbox(evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode == 9 && tentative_game_chosen == 'rd') {
document.getElementById("user_input_for_remainder_div").focus();
}
return false;
}
function handleShiftTabInRemainderTextbox(evt) {
var e = event || evt; // for trans-browser compatibility
if(e.shiftKey && event.keyCode == 9 && tentative_game_chosen == 'rd') {
document.getElementById("user_input_div").focus();
}
return false;
}
What am I doing wrong?
Any thoughts would be much appreciated.
is there any way to identify the keyboard language?
i have a simple textbox. that i want to check keyboard language. when the user click on textbox if the keyboard language was Contrary to Persian the user can't type anything and show the error:" change your keyboard language to persian" and when the keyboard language changed user can type.
I have used two different approaches for detecting English and Persian characters in my solution:
document.getElementById('a').addEventListener('keypress',function(e){
if (isEnglish(e.charCode))
console.log('English');
else if(isPersian(e.key))
console.log('Persian');
else
console.log('Others')
});
function isEnglish(charCode){
return (charCode >= 97 && charCode <= 122)
|| (charCode>=65 && charCode<=90);
}
function isPersian(key){
var p = /^[\u0600-\u06FF\s]+$/;
return p.test(key) && key!=' ';
}
<input id="a" type="text"/>
I don't think that's possible - anyway it's probably not what you want (Caps Lock, for example, will still output English)
I'd recommend placing a keypress event listener on your textarea and checking each letter against a "Persian only" regex
like this (untested):
document.getElementById('a').addEventListener('keypress',function(e){
if (e.charCode > 160)
console.log('persian');
else
console.log('english');
});
<input type="text" id="a"/>
If you want to match ZERO WIDTH SPACE you should add this too:
\u200B
So
var p = /^[\u0600-\u06FF\u200B\s]+$/;
for more characters like ” | « | » | ?| ; | : | ... see Regex Persian Language
using jquery :
$("#selector").keyup(function (event) {
var code = event.key.charCodeAt(0);
if (isEnglish(code)) {
alert("you typed in english");
return;
}
else {
alert("please type in english");
}
});
function isEnglish(charCode) {
return (charCode >= 97 && charCode <= 122)
|| (charCode >= 65 && charCode <= 90);
}
This:
function only_persian(str){
var p = /^[\u0600-\u06FF\s]+$/;
if (!p.test(str)) {
alert("not format");
}
}
or you can use this: http://imanmh.github.io/persianRex/
I have 3 inputs that need to tab to the next when the max length are reached.
These 3 inputs come with values and when the user change the value of the first input it focus on the next and so on.
My problem is that since my second input has already the length it jumps to the third input. If the use input the values slowly it don't do this.
The source of the problem is that if the typing is too fast the first keyup event is fired after the second type and it fires on the second input.
I've written a jsfiddle with the problem and this is my function to wire the auto focus change.
function WireAutoTab(CurrentElement, NextElement) {
CurrentElement.keyup(function (e) {
//Retrieve which key was pressed.
var KeyID = (window.event) ? event.keyCode : e.keyCode;
var FieldLength = CurrentElement.attr('maxlength');
//If the user has filled the textbox to the given length and
//the user just pressed a number or letter, then move the
//cursor to the next element in the tab sequence.
if (CurrentElement.val().length >= FieldLength && ((KeyID >= 48 && KeyID <= 90) || (KeyID >= 96 && KeyID <= 105)))
NextElement.focus();
});
}
Is there any other event that I can use to prevent this? The behavior that I want is that even if the second input has value, it stops on it.