formatting textfield input - javascript

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).

Related

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>

How to restrict the text field to enter only digits

I am trying to create a text field for entering dates that accepts only digits. If any one enter any other character, no need to display in the text field and the cursor need to remain in the same position(no need to move to the next character position). If the entered value is a number , then need to show in the text field and need to move the cursor to the next level.
So at last the text field contains only the numbers.
I am using the following code,
$("#date").keyup(function(event){
//var c=(event).keyCode;
var c= String.fromCharCode(event.keyCode);
var cval = $(this).val();
alert("Characters="+c);
if(isNumber(c))
$(this).val(cval+c);
}
Advanced Thanks,
VSoft
In HTML5 you can use input type as number.
You can do this:
$('#date').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
I think you need jQuery Input Mask Plugin
you should run your function only when Focus is on the requested text field

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;

Mask user input with asterisks

I am trying to implement a simple input mask js which will replace asterisks for any sensitive user data on the form like the social#. However, this might sound like a very stupid question, when i want to submit the form, i want to send the actual value of the textfield, the user entered. How do i go about doing that? I want to avoid submitting asterisks as the textfield value
function mask(str) {
if(str.value!=null || str.value!="") {
num = str.value.length;
var masked = "";
for(i=0; i<num; i++) {
masked = masked + "*";
}
document.getElementById(str.id).value = masked;
}
}
<input type="password" /> will do this for you automatically, no need to reinvent the wheel
Given your feedback, what about a middle-road? Keep the input box visible until text has been entered, then hide the input box when it loses focus and show a UI element to allow the user to bring the box back if needed.
Here's a quick proof-of-concept

Categories