We Keep Coding

jQuery to prevent user from inputting if regular expression is not matched by using preventdefault

Every time user enter, value is checked with regular expression, I'm trying to restrict user from entering further into input field if regexp is not matched
Using keyup event, preventdefault never fires and using keypress event, user is unable to input at all because in the begining, value in input field shows as "" (nothing)
var discountRegex = /(^100([.]0{1,2})?)$|(^\d{1,2}([.]\d{1,2})?)$/
$("#" + (idOfElement)).on("keyup",function (e) {
var val=this.value
var k = e.keyCode
if(k==46 ||(k > 48 && k <97)){
console.log(k)
return discountRegex.test(val);
}
});
in the above code idOfElement is the id i get on whichever field i focus.

Please refer sample code. If input key is invalid input will not accept it. Also please find fiddle for same in comment.
<input type="text">
$(document).ready(function(){
$("input").bind('keypress', function(e) {
var str = e.keyCode;
if (/(^100([.]0{1,2})?)$|(^\d{1,2}([.]\d{1,2})?)$/.test(str)) {
alert('Invalid')
e.preventDefault();
} else {
alert('Valid');
}
});
});

You can check if the regex is matched and if not you can remove the last char like the example below
I updated the code with keydown example
Example

Validate contenteditable on enter and not on clicking

I'm using contenteditable so as people can edit a text.
So when you edit the text thas has contenteditable = true, if you click somewhere else in the page, it will "validate" your text and replace the older.
That's not the comportment I'd like it to have because the user has no way to get back to the older text except by refreshing the page.
To me, it should validate the text only if you press the Enter Key and not if you click somewhere else. If you click somewhere else then it should get back to the older text.
Any idea how to make it ?
Thanks ! :)

When the user clicks the box, you can store its value into a var, and when they click away, reset the box to that var.
If the Enter key doesn't already validate, here's some pseudocode as to what you could do:
var oldvalue = "";
function OnClickBox() {
oldvalue = (yourelement).value;
}
function OnClickAway() {
(yourelement).value = oldvalue;
}
function Validate() {
(yourelement).value = yourvalidationfunction(yourelement.value);
}
document.onkeydown = function (e) {
key = e.which || e.KeyCode;
if (e.keyCode === 16) { //enter key
Validate();
}
}
Then you assign the box's onclick to OnClickBox(), and unselecting the box to OnClickAway().
And for future posts, please include some code as to what you have tried already, and for better context as to your question.

Understanding on drop function

I build a regsiter form - and handler function for check the values of the inputs.
When someone focus on input or keyup something - a checking function is running.
Now I'm trying to make a handler for drop text into the input.
I want to run the validation when the user drop text into the input (ex. select some text in the page and drag and drop it into the input).
What I found out is when the user drop the text into the input - the value of the input isn't updating. only when the user exit the input (focusout?) the input value is updating.
What can I do for making the on drop event update the value in the time the text is dropped into the input, and not only after the user is exit the input???
Example of my code:
$("#register_form input").on("keyup focus change", function(){
index = $(this).parent().index();
// except submit input
if (index != 4) {
var input_name = $(this).attr("name");
if (input_name == "register_password") {
formInputHandler($(this), input_name, index);
formInputHandler($("input[name='register_repassword']"), "register_repassword", 3);
} else {
formInputHandler($(this), input_name, index);
}
// check submit change
formSubmitHandler();
}
});
$("#register_form input").on("drop", function(event){
???
});

Replacing input text when tab is pressed ( Chrome Extension )

So basically what I'm trying to do is identify if the input bar has "y" typed in it and when tab key is pressed replace that y with "youtube ".
Javascript
var input = document.getElementById('searchbar').value;
var words = input.split(" ");
$("#searchbar").keydown(function(e) {
if(e.keyCode == 9) {
e.preventDefault();
if(input == 'y') {
$('#searchbar').text('youtube');
}
}
});
Currently I'm not getting any error messages, its just not working. The tab key also moves the focus away from the input bar.

Here is why
You should be getting value on keydown , not on page load as at the time of loading page value is empty.
As you are using jquery , get current value of input using jquery facade/selector
Finally you update the input box value not text
Try this
$("#searchbar").keydown(function(e) {
var input = $('#searchbar').val();
var words = input.split(" ");
if(e.keyCode == 9) {
if(input == 'y') {
$('#searchbar').val('youtube');
}
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter Search Term
<input type="text" id="searchbar">

elegant jquery search bar?

i have a list of posts on a page with a search bar at the top of the page. is there a way to get the contents of the search bar when the user hits enter?
i don't want to submit a form but i want to get the contents of the search bar without leaving the page. i think i'd be able to get the contents of the field using $("#txt_name").attr('value'); but is there a way I can just get the value when the user hits enter inside the search box?
then depending on what they search i'd be able to check the <div> id's and see if they match. if they don't match then fade them out...

Something like this should help:
http://jsfiddle.net/Batfan/vWMXm/
This listens for the [enter] key to be pressed on the input field and hides/shows elements based on if they contain text matching the query. All results are displayed on a blank search. See below:
$(document).on("keypress","#searchbox",function(e){
var userVal = $(this).val();
if(e.which == 13) {
$( "li" ).each(function() {
if($(this).text().match(new RegExp(userVal, "i"))) {
$(this).show();
} else if(userVal == "") {
$(this).show();
} else {
$(this).hide();
}
});
}
e.stopPropagation();
});

You can attach event handler function to your input element
var $search = $("#txt_name").on('keyup', function (e) {
if (e.keyCode == 13) {
alert($search.val());
}
})