I would like to detect a new empty line in a text area and if the user just pressed enter in the text area, without entering any data to return false and echo a message. I have made some research and thought of something like this:
var validatef ....
var code = (e.keyCode ? e.keyCode : e.which);
if (validatef == 'a value here' || code == 13) {
somevarhere.textcontent = 'Message';
return false;
}
else {....}
But it doesn't seem to work.
You can detect an empty line in a textarea by checking for the values:
\r\n (works fine for me) or \n
Just replace the text a value here with \r\n or \n what best suits you.
EDIT:
Check How to count string occurrence in string? to count regex appearances. So you can make a for loop to show the error message on /\s/g.
Hope it helps.
Try this
$('textarea').on('keypress', function(e) {
var val = $('textarea').val();
if (e.which == 13) {
if(! /\S/.test(val)) {
alert("no data");
}
}
});
this alerts no data for each keypress.
This is in jQuery but it will be similar even in plain Javascript
Here is the demo http://jsfiddle.net/TUCx8/
just test if the user pressed enter twice
/\n\n/.test(this.value)
According to the first sentence of the question, this may be one of possible solutions:
var enters = 0;
$('textarea').keypress(function(event) {
if (event.which == 13)
enters++;
else
enters = 0;
if (enters > 1) {
alert('You hit 2 new lines!');
}
});
Live example http://jsfiddle.net/fp6xk/
Another one solution is to check an empty line right before the end of text:
(function(){
$('textarea').keyup(function(event) {
if (/(\r?\n){2}$/.test($(this).val())) {
alert('2 consecutive empty lines at the end!');
}
});
})();
It would work independent of consecutive enter presses.
http://jsfiddle.net/fp6xk/4/
Related
Im trying to exclude the vertical bar '|' from my input field called Comments, although i still want to keep basic punctuation like , . : ; - im getting stuck on how to keep some special characters but remove another. In not strong with Regular Expression, hoping some fresh eyes will help.
This is what Ive got so far;
$('#comments').keydown(function (e) {
var k = String.fromCharCode(e.which);
if (k.match(/[^a-z A-Z0-9\x08]/g))
e.preventDefault();
});
The following code works. I have no idea why the code for the pipe character is 220 and not 124, but there you go!
var $comments = $('#comments');
var pipeKeycode = 220; // I cannot figure out why
$comments.on('keydown', function(e) {
if (e.which === pipeKeycode) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Comments: <input id="comments"></label>
To prevent user from typing |.
I don't prevent user from pasting a string with |, but after user gets out of the field, I remove that character in blur:
$('#comments').keydown(function (e) {
if (e.key === '|')
e.preventDefault();
});
$('#comments').blur(function (e) {
e.target.value = e.target.value.replace(/\|/g, '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="comments">
I'm coding a chat box. And the Characters that I enter, is not reflected as it is.
This is basically the code I'm using.
$(document).ready(function() {
$(".entry").keydown(function(event) {
console.log(String.fromCharCode(event.which));
});
});
And so when I type (lower-case) "a", console tab shows me "A".
special characters will not get reflected unless I create separate condition for it.
Could someone help me with a different function which does it all by itself, and returns a string as entered by the user. Or a different approach to this challenge all together. Thanks.
Actual code - chat.js
var str='';
$(document).ready(function() {
$(".entry").keydown(function(event) {
console.log(event.which);
if (event.which === 13 && event.shiftKey === false) {
console.log(str);
event.preventDefault();
} else {
var c = event.which;
str = str.concat(String.fromCharCode(c));
}
});
});
So basically the every character entered would get concated to the string. and Enter key would dump the text to console.
It's seems that trying to get the value of event.which in keydown event could lead you to a wrong ascii code (What you need to pass to String.fromCharCode).
See https://stackoverflow.com/a/10192144/3879872
I don't know if it fits your needs, but you could try:
$(document).ready(function(){
$(".entry").keypress(function(event) {
console.log(String.fromCharCode(event.which));
});
});
(Note the use of keypress instead of keydown)
EDIT: Added working Demo
var str = '';
$(document).ready(function() {
$(".entry").keypress(function(event) {
console.log(event.which);
if (event.which === 13 && event.shiftKey === false) {
console.log(str);
event.preventDefault();
} else {
var c = event.which;
str = str.concat(String.fromCharCode(event.which));
}
console.log('Formated Text', str);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="entry"></textarea>
I am trying to disable spaces in the Username text field, however my code disables using the back arrow too. Any way to allow the back arrow also?
$(function() {
var txt = $("input#UserName");
var func = function() {
txt.val(txt.val().replace(/\s/g, ''));
}
txt.keyup(func).blur(func);
});
fiddle: http://jsfiddle.net/EJFbt/
You may add keydown handler and prevent default action for space key (i.e. 32):
$("input#UserName").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
DEMO: http://jsfiddle.net/EJFbt/1/
This seems to work for me:
<input type="text" onkeypress="return event.charCode != 32">
It doesn't "disable" the back arrow — your code keeps replacing all the text outright, whenever you press a key, and every time that happens the caret position is lost.
Simply don't do that.
Use a better mechanism for banning spaces, such as returning false from an onkeydown handler when the key pressed is space:
$(function() {
$("input#Username").on("keydown", function (e) {
return e.which !== 32;
});
});
This way, your textbox is prohibited from receiving the spaces in the first place and you don't need to replace any text. The caret will thus remain unaffected.
Update
#VisioN's adapted code will also add this space-banning support to copy-paste operations, whilst still avoiding text-replacement-on-keyup handlers that affect your textbox value whilst your caret is still active within it.
So here's the final code:
$(function() {
// "Ban" spaces in username field
$("input#Username").on({
// When a new character was typed in
keydown: function(e) {
// 32 - ASCII for Space;
// `return false` cancels the keypress
if (e.which === 32)
return false;
},
// When spaces managed to "sneak in" via copy/paste
change: function() {
// Regex-remove all spaces in the final value
this.value = this.value.replace(/\s/g, "");
}
// Notice: value replacement only in events
// that already involve the textbox losing
// losing focus, else caret position gets
// mangled.
});
});
Try checking for the proper key code in your function:
$(function(){
var txt = $("input#UserName");
var func = function(e) {
if(e.keyCode === 32){
txt.val(txt.val().replace(/\s/g, ''));
}
}
txt.keyup(func).blur(func);
});
That way only the keyCode of 32 (a space) calls the replace function. This will allow the other keypress events to get through. Depending on comparability in IE, you may need to check whether e exists, use e.which, or perhaps use the global window.event object. There are many question on here that cover such topics though.
If you're unsure about a certain keyCode try this helpful site.
One liner:
onkeypress="return event.which != 32"
There's a TextBox that I wanna allow users to just enter numbers & not any alphabetical characters.
So how could I ignore those chars entered by end user via JavaScript or jQuery?
Notice I don't wanna replace user's entered value by empty string; Instead wanna ignore case if there is any way for it.
Try that code:
$("#id").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) {
return false;
}
});
reference http://roshanbh.com.np/2008/04/textbox-accept-only-numbers-digits.html
You want to attach a handler to the textbox's keypress event. In here check the event.which property to find out what key is pressed, and if it's not a number (between keycodes 48 and 57) return false, which will cancel the default behaviour of typing in the textbox.
$("input").keypress(function (e) {
if (e.which < 48 || e.which > 57)
return false;
});
I would not recommend intercepting keystrokes, allow the user to type whatever he/she wants, and validate on user action (submit/select etc).
Look at this jQuery plugin for instance: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
you said you didn't want to include alphabetical then you said you just want to ignore case? what do you need to do?
You can ignore lower case in JS by using string.toLowerCase()
For numeric-only I use this jQuery extension/plug in
http://www.texotela.co.uk/code/jquery/numeric/
In above options we can prevent the user from keyboard, but what if the user paste something, it will not restrict user to not paste any special character.
For example we are restricting it from keyboard with proper error msg
<script type="text/javascript">
$(function () {
$("#package").keypress(function (e) {
var keyCode = e.keyCode || e.which;
$("#lblError").html("");
//Regex for Valid Characters i.e. Alphabets and Numbers.
var regex = /^[A-Za-z0-9]+$/;
//Validate TextBox value against the Regex.
var isValid = regex.test(String.fromCharCode(keyCode));
if (!isValid) {
$("#lblError").html("Only Alphabets and Numbers allowed.");
}
else
{
$("#lblError").html("");
}
return isValid;
});
});
</script>
Now let's prevent it from pasting special character.
$('#package').bind("paste",function(){
var data= $('#package').val() ;
var removedNotAllowed = data.replace(/[^ws]/gi, '');
$( '#package' ).val(removedNotAllowed);
$("#lblError").html("Only Alphabets and Numbers allowed.");
});
I'm trying to create a div with contenteditable like the Facebook status update. Then I mean I want to show an autocomplete box when the user have written #.
How would you do that. Currently I'm just playing with keypress and check if the keycode = 64. Somehow that works, but it doesn't validate if there's a space before the alfa, or if the user has unfocused the box, then focused it again.
Any ideas? Or do you know about any plugin that works something like that?
Tnx
I'd probably do it with keypress too.
but we need to check the cursor position to check the character before the '#'.
here's the function I used from http://javascript.nwbox.com/cursor_position/cursor.js
function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate();
r.moveEnd('character', o.value.length);
if (r.text == '') return o.value.length
return o.value.lastIndexOf(r.text);
} else {
return o.selectionStart;
}
}
then with jquery I wrote this keypress callback function:
txt.keypress(function(event) {
if (event.which == 64) {
var index = getSelectionStart(this)
var prevChar = txt.val().substring(index - 1, index);
// now you can check if the previous char was a space
}
});