We Keep Coding

Test against actual value of input type="number"

I am creating a form for a mobile web app with input boxes asking for number input, so I'm using input type="number" for the validation and it's working well. I am also changing behavior based on the input in the box. I need to hide a div until the user enters text in the box. When they delete all text from the box, then hide the div again. This is easy to do - detect keyup on the input and if its value is an empty string or not. The problem comes when the user enters text that's not a valid number (possible, at least with iOS keyboard). The value of the input box is an empty string when the entered text is not a valid number, unfortunately. So my code is hiding the div when I do still need it to be visible, because it thinks the input box has no value in it.
How can I get the actual value stored in a number input type so I can test against it? (I need to keep it a number input type so the proper keyboard appears.) Thanks!
Here's my snippet of code:
$('input.deletable').keyup(function() {
console.log($(document.activeElement).val()); //returns empty string if input is "?)&" for example
if ($(document.activeElement).val() != '')
$('#myDiv').css('display', 'block');
else
$('#myDiv').css('display', 'none');
});

I think that "document.activeElement" isnt the best way to get the current input value. You can verify the input validity as well.
$('input.deletable').keyup(function() {
var $this = $(this);
if ($this.val() != '' && this.checkValidity())
$('#myDiv').css('display', 'block');
else
$('#myDiv').css('display', 'none');
});

How to remove a set of first 3 characters in an input field, after user is done typing - with jQuery

Is there any way I can remove a match of a set of first 3 characters in an input field, once a user is done typing, with jQuery?

If you want to remove first three characters after user has moved his cursor to other field, use this code...
$('#yourInputField').blur(function(event) {
field = event.target;
value = field.value;
$('#yourInputField').val(value.substring(3,value.length));
});

how to remove previous text when user enter a new number or character and start typing in javascript or jquery

I have a textbox ,i want whenever user start entering a number in that texbox the previous value should be remove.
Let say there is a textbox which contain a number as 23 ,i want whenever user start typing in that same textbox 23 shold be remove and new enetered number should be shown.

You can use the select function on text inputs and textareas to select all of the text. Then when the user types, the text gets replaced.
For example, if the input or textarea has the id "target":
document.getElementById("target").select();
Live Example | Source

Maybe you can do something like this
<input type="text" onclick="clear(this);">
And then make the javascript function named clear (or whatever name you want)
<javascript type="text/javascript">
function clear(element)
{
element.value = "";
}
</script>

Input box that converts text to buttons

I am trying to create a text input field that converts the input text to a "button" onblur. For example in the hotmail "new email page" when you enter email addresses it will make it into a little button-like object with a delete button when you enter a delimiter (semi-colon or comma). Anyone know how to do this?
I did a sort of workaround thing to what i want where i have a div with a border. In the div there is an input field with the borer invisible and a hidden button. I have a js function that takes the input value and makes the button visible with the value but this is not exactly what im looking for..
actually i just realised stackoverflow does this as well when im adding tags to the post

This is a multiple value field. Give a look at this one.
The feature is not so complex. It's an HTML list, and each value that you choose is converted into a LI node and appended to that list. The input field is inside the last LI, so its cursor can always be after the last choice. Besides, the input value is assigned to a hidden input, which can be used on the server-side as a comma-separated value.

Here's a simple way to fake it (and it looks like this is similar to what SO does for tags):
Create your text <input>, and make sure that its border and outline are both set to none.
Create a container for your tags (or buttons, or whatever) and put it next to the <input>.
Monitor the keydown event on the <input>; when the user tries to enter a "break" character (such as a semi-colon or comma), create the button, add it to the container, empty the <input>'s value, and prevent default (so that the "break" character isn't inserted into the tag, or left in the <input>).
That's the basic idea. Once you've done that, you can add event listeners/handlers to the buttons, or style them any which you'd like, etc.
Here's the simple example I cooked up:
var inp = document.getElementById('yourInput'),
tags = document.getElementById('yourContainer'),
breaks = {
186: 1, // semi-colon
188: 1 // comma
};
function createTag(txt) {
var elem = document.createElement('span');
txt = document.createTextNode(txt);
elem.appendChild(txt);
elem.className = 'tag';
tags.appendChild(elem);
}
function monitorText(e) {
e = e || window.event;
e = e.keyCode;
if (breaks[e]) {
e = inp.value;
inp.value = '';
createTag(e);
return false;
}
}
inp.focus();
inp.onkeydown = monitorText;

formatting textfield input

I've a text field.
I'm to type the email in it.. eg. username#domain.com
What I want is that, as soon as the user types the char "#", the remaining part of the string gets masked so that it appears to the user viewing as username#**********
But in the backend, the real keys typed has to be captured somehow.
Is there a way to do that using javascript?

I have no idea why you'd want to do that, but you could add an onKeyPress function to the text field which adds the typed letter to a hidden field and then updates the text field with the starred-out copy.

Try with jQuery
$("input").keyup(function(){
var charIndex = $(this).val().indexOf("#");
if(charIndex!=-1){
charIndex++; // to start with character after #
$("#hidEmail").val($(this).val());
var replaceStr = "";
for(i=0;i< ($(this).val().length-charIndex) ; i++){
replaceStr=replaceStr+"*";
}
$(this).val($(this).val().replace($(this).val().substr(charIndex),replaceStr));
}
});

You can use OnKeyDown event to capture the user input.
Using a hidden field, keep the real value in there. When a new character is pressed, add it to the value from the hidden field and in the text field display the masked text.
Also you have to be carefull with special characters (backspace in particular).