JSFiddle: https://jsfiddle.net/mqfntbws/
I have a contenteditable span in which I want to prevent users from typing special characters or numbers. The problem is, I'm able to prevent special characters but it won't work on numbers. Anyone know what I'm doing wrong?
HTML:
<span required="" contenteditable="" placeholder="First Name" aria-required="true"></span>
JS:
$('span[contenteditable]').on('keypress', function (event) {
var regex = new RegExp("^[A-z]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key) && !((event.keyCode>=46 && event.keyCode<=58) || event.keyCode==8 || event.keyCode==9 || (event.keyCode>=37 && e.keyCode<=40))) {
console.log(">>>");
event.preventDefault();
return false;
}
});
As you appear to be using jQuery, you can make full use of the isNumeric() function within the API.
From the documentation:
The $.isNumeric() method checks whether its argument represents a numeric value. If so, it returns true. Otherwise it returns false. The argument can be of any type.
So using this cleans up your if statement immensely.
if(!regex.test(key) || $.isNumeric(key))
Leaving you with the following:
$('span[contenteditable]').on('keypress', function (event) {
var regex = new RegExp("^[A-z]+$");
var key = String.fromCharCode(event.which);
if (!regex.test(key) || $.isNumeric(key)) {
event.preventDefault();
return false;
}
});
I have forked and updated your original fiddle with a working example: https://jsfiddle.net/GH05T/mqfntbws/6/
Related
In my textbox I allowed only integer value and comma it will control using javascript.Now my doubt how to control more than comma continuously (i.e)1,2,3,4 is to ok then 1,2,3,,4,,5 its need restricted.Its possible in javascript.
<p:inputText onKeyPress="onlyAllowDigitComma(event);"/>
Your answer doesn't show how far you go with your solution. I suppose code bellow is what you wanted, also I suppose you need removing comas from start and end.
<input type="text" onkeypress="onlyAllowDigitComma(event,this);" onkeyup="onlyAllowDigitComma(event,this);"/>
<script>
function onlyAllowDigitComma(e,l){
var k = e.which;
if ((k <= 47 || k >= 58 ) && k!=44 && k!=8 && k!=0) {
e.preventDefault()
};
l.value=l.value.replace(/,,/g,',');
}
</script>
Use a regex to validate your input. If the first match you get is the same as the whole input, then you're good to go.
The regex you're looking for is /(\d,?)*/g (Test Link)
For the sake of simplicity, I did the following code with the 'keyup' event to avoid shortcuts problems. You may also want to check on copy / paste event.
let myInput = document.getElementById('myInput');
let myInputValue = myInput.value;
myInput.addEventListener('keyup', function(event){
if(isPerfectMatch(myInput.value, /(\d,?)*/g)){
console.log('Format is correct.');
myInputValue = myInput.value;
}
else {
console.log('Wrong format');
myInput.value = myInputValue;
}
});
function isPerfectMatch(value, regex){
let match = value.match(regex);
return match !== null && match[0] == value;
}
(Demo JSFiddle)
How would you, with JS or jQuery, determine if what the user is typing is a new word?
What I want to do:
I am writing a documentation tool with autocompletion for different types. If you type f.e. # it will populate Java Classes in a box, # would populate test classes, etc. Now I don't want to populate these values, if the user is writing something like an email like yourname#domain.com. So I need the values to populate only when it's the beginning of the word.
I am aware of keydown, keyup events, etc. I just don't know how to check for this certain kind of event properly.
One way would be to save every typed letter in a variable and then check if the previous "letter" was a space and if it was, we know it's a new word. Is this the best/most efficient way to do this?
One way is to check what's before the # in the input box, using selectionStart:
onload = function() {
var io = document.getElementById("io");
io.onkeypress = function(e) {
if(e.charCode == 64 && (
io.selectionStart == 0 || io.value[io.selectionStart-1].match(/\s/)))
document.getElementById("ac").innerHTML = "autocomplete!";
else
document.getElementById("ac").innerHTML = "";
}
}
<input id="io">
<div id="ac"></div>
Try this JSFiddle. I'm performing the check like so:
var text = $("#test").val();
if (text.length == 0 || text.charAt(text.length - 1).match(/[\s\b]/)) {
$("#result").html("new word");
} else {
$("#result").html("no new word");
}
You can easily adapt the .match() pattern if you like to include other characters as "whitespaces" (e.g. curly braces) for your Editor.
Assuming text is entered in a text input with id="txtchangedetection":
$("#txtchangedetection").change(function(){
console.log("The text has been changed.");
});
/*This is `JQuery`*/
I've understood you want to detect word changes in the input. Please precise if I'm wrong. What do you mean by 'new word' ?
One solution will be like this :
1- declare a variable "newWord = true"
2- with keydown event check if the key pressed is a space
if YES : newWord = true
if NO : newWord = false
var newWord=true;
$("#textarea").keydown(function(e){
if(e.keyCode == 32){
newWord=true;
}else{
newWord=false;
switch(e.keyCode){
//work to do
}
}
})
use keypress on your input field... populate the array inside the if with your special chars
if(prev == 13 || prev == 32 || $('#doc').val().length==0 || prev==null){
listen = true;
}else{
listen = false;
}
prev = e.which;
if(listen && $.inArray(String.fromCharCode(e.which),["#","#"]) != -1){
e.preventDefault();
alert("populate box here");
listen = false;
prev = null;
}
the fiddle https://jsfiddle.net/6okfqub4/
I do not want to allow to press the function key like (F1,F2..etc),tabular key and also do not add any characters too.
for that one below code which is not working from my site.
document.getElementById("code").addEventListener("keydown",function(e){
var oldOne = this.value;
var newOne = (this.value + String.fromCharCode(e.keyCode)).toLowerCase();
if(oldOne==newOne){
e.preventDefault();
}
document.getElementById('message').innerHTML = "Is it the same: "+(oldOne==newOne)+", Before: "+oldOne+", After: "+newOne;
})
<textarea id="code"></textarea>
<div id="message"></div>
Because convert charcode that is out of available char range [32, 126] would produce a "", while it seems like a empty string, it accounts to length, and can't be trim like a space, so "apple" + "ctrl"' s length is 6 while it displays as "apple", you should better use
if (e.keyCode < 32 || e.keyCode > 126) {
// This is not a valid char, do something to ignore
}
to ignore those special chars, rather than convert it to string, append to current value then compare with oldValue.
When you're writing
String.fromCharCode(e.keyCode)
Then you're always getting a string even if you press though you're not seeing any change in the value, the String.fromCharCode(e.keyCode) is getting something, the string format of the key, it's not a blank string so you're always getting false in the if.
Either you can check in the keycode or you can check after keyup.
keydown event give you the state of object before your character is written.
`keyup events give you the state of object after it's written.
You may want to do something like this (fiddle):
document.getElementById("ta").addEventListener("keydown", function () {
this.oldValue = this.value;
});
document.getElementById("ta").addEventListener("keyup",function(e){
var oldOne = this.oldValue;
var newOne = this.value;
if(oldOne == newOne){
e.preventDefault();
}
document.getElementById('message').innerHTML = "Is it the same: "+(oldOne==newOne)+", Before: "+oldOne+", After: "+newOne;
})
I have received PHP/JS code from previous developer and I need to add number validation to a Mobile Number field. I already have the HTML validation in place but I need to add that if someone presses an invalid key, that it doesn't get displayed only to highlight the field later in red because it contains invalid input.
I've seen many regex's used and tried them but they had an either/or effect from what I need which is: If a letter or special character is entered, do not accept and do not display, all other input (digits, keys) is accepted (I need the invalid character not be displayed at all, not displayed and then erased). The regex that is working the most now is this:
function filterNonDigits(evt)
{
var event = evt || window.event;
var keyentered = event.keyCode || event.which;
keyentered = String.fromCharCode(keyentered);
//var regex1 = /[0-9]|\./;
var regex2 = /^[a-zA-Z.,;:|\\\/~!##$%^&*_-{}\[\]()`"'<>?\s]+$/;
if( regex2.test(keyentered) ) {
event.returnValue = false;
if(event.preventDefault) event.preventDefault();
}
When I used the commented regex1 (with the IF condition reversed), naturally it limited input to only digits thus preventing all keys such as Delete, BackSpace, etc. When using regex2, I still can't press Delete or the digits from the numpad.
So my question is, can the above code be modified to accept only digits but also allow keys? Another important point is that I need a method that doesn't use keycodes (8, 24 etc) for those key, in order to make sure all keyboard types can be used.
New Update:
So my solution is as follows: If the "oninput" property exists, I use the solution provided by Ehtesham and if it doesn't, the backup uses the solution provided by Rohan Kumar. So it's something like this:
if (obj.hasOwnProperty('oninput') || ('oninput' in obj))
{
$('#mobileno').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});
}
else
{
$('#mobileno').on('keypress',function(e){
var deleteCode = 8; var backspaceCode = 46;
var key = e.which;
if ((key>=48 && key<=57) || key === deleteCode || key === backspaceCode || (key>=37 && key<=40) || key===0)
{
character = String.fromCharCode(key);
if( character != '.' && character != '%' && character != '&' && character != '(' && character != '\'' )
{
return true;
}
else { return false; }
}
else { return false; }
});
}
Thanks.
The best method here is to use input event which handles all your concerns. It is supported in all modern browsers. With jQuery you can do like following. Handles all cases pasting the value with mouse/keyboard backspace etc.
$('.numeric').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});
See it here
You can check if input event is supported by checking if the input has this property if not you can use onkeyup for older browsers.
if (inputElement.hasOwnProperty('oninput')) {
// bind input
} else {
// bind onkeyup
}
A nice solution is described in a previous post:
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
Try it like,
CSS
.error{border:1px solid #F00;}
SCRIPT
$('#key').on('keydown',function(e){
var deleteKeyCode = 8;
var backspaceKeyCode = 46;
if ((e.which>=48 && e.which<=57) ||
(e.which>=96 && e.which<=105) || // for num pad numeric keys
e.which === deleteKeyCode || // for delete key,
e.which === backspaceKeyCode) // for backspace
// you can add code for left,right arrow keys
{
$(this).removeClass('error');
return true;
}
else
{
$(this).addClass('error');
return false;
}
});
Fiddle: http://jsfiddle.net/PueS2/
Instead of checking for the event keyCode, why don't you just check for changes inside the actual input and then filter out non-numbers?
This example uses keyup so that it can read what was actually entered, which means the character is briefly displayed and then removed, but hopefully you get my gist. It might even give the user feedback that the character is not allowed. Either way I think this is the easiest setup, let me know if you need more help fleshing this out.
function filterNonDigits(evt)
{
var event = evt || window.event;
var val = event.target.value;
var filtered = val.replace(/[^0-9]/g, '');
if(filtered !== val) {
event.target.value = filtered;
event.target.className += " error";
}
}
http://jsfiddle.net/mEvSV/1/
(jquery used solely to easily bind the keyup function, you won't need it for your actual script)
/\d/ is equivalent to the above described /[0-9]/. src: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit
This is a bit more concise...
this.value = this.value.replace(/\D/gm, '');
For example we have a textbox which is for tags for a blog. What I want is I want to limit number of tags to be limited.
For instance, "web hosting,php,windows8".
When the user tries to type another one to textbox which he will start with comma, the textbox won't let him write it.
In your keypress handler, capture the event object and do;
if (event.which == 44 && $(this).val().split(",").length > 2) {
event.preventDefault();
}
See it in action here; http://jsfiddle.net/5L7mU/
We can split this problem into 3 smaller problems.
First, we need a way to stop the user from writing stuff into the textbox. When you hook a callback on keypress, the event passed has a method called preventDefault which should do the job. So to block all input:
$("input").keypress(function(event) {
event.preventDefault();
});
Now, to check how many comas there already are in the textbox, we can use regex. The match function will return null instead of an empty array if there are no matches so we gotta check for that.
$("input").keypress(function(event) {
var matches = $(this).val().match(/,/g);
var count = 0;
if (matches)
count = matches.length;
console.log(count);
});
Finally, we need to be able to check if the user typed in a coma. The event objectwill have a property called which that contains the key code of the character entered. With a little bit of exploring, you can find out that the key code for coma is 44.
$("input").keypress(function(event) {
if (event.which == 44)
event.preventDefault();
});
So if we put it all together:
$("input").keypress(function(event) {
var matches = $(this).val().match(/,/g);
var count = 0;
if (matches)
count = matches.length;
if (count >= 2 && event.which == 44)
event.preventDefault();
});
http://jsfiddle.net/4wn5W/
$(document).ready(function(){
$('#textbox').keypress(function(e){
var text = $(this).val();
if(text.split(',').length>3){
return false;
}else if(e.which==44&&text.split(',').length>2){
return false
}
});
});
Fiddle:
http://jsfiddle.net/L4X4C/