How to keep a suffix while masking a input using jQuery - javascript

I'm trying to mask a user input with the following mask "########-##.####.7.09.009" using jQuery, so when the user starts typing it would go like this:
1______-__.____.7.09.009 (user typed 1)
12_____-__.____.7.09.009 (user typed 2)
123____-__.____.7.09.009 (user typed 3)
and so on until it reaches the "7.09.009" part.
The user should not be able to edit that part, it is like a fixed placeholder there. I've tried using Jasny's input mask with some success but since numbers are masked with 0's and the fixed suffix has 0's, it allowed the user to type where there are zeroes in the fixed part. I did not find a way to replace the numbers placeholder from 0 to something else, as I imagine that would have solved my problem.
Then I found another jQuery mask plugin that allows me to mask numbers using # but as it also recognizes 0's as a placeholder for numbers, it ended up not working. I also tried creating a custom mask like so:
$("#numero-processo").mask('0000000-00.0000.A.BC.BBC',
{placeholder: "_______-__.____.7.09.009",
'translation': {
A: {pattern: /[7]/},
B: {pattern: /[0]/},
C: {pattern: /[9]/}
}});
This worked to some extent, but when the user reached the fixed suffix part, (he/she) would have to actually type the suffix "7.09.009", and that is the only thing that would be allowed there because of the custom mask. However, I do not want the user to type the suffix, it needs to be fixed there. Does anyone know how to accomplish this? Thank you.

You usually solve this by letting the fixed part outside the input (if the user shouldn't modify it, it's more ergonomic if it's actually not in the alterable part).
<input type="text" />.7.09.009
You can make it nicer with some css around, and you'll have to add it in JS or in the language you use to process the data. So maybe something like that :
<div class="mask_field" addendum=".7.09.009"><input type="text" />.7.09.009</div>
Could be easier to work with.

You could accomplish this using this library
<script src="https://rawgit.com/RobinHerbots/Inputmask/4.x/dist/jquery.inputmask.bundle.js"></script>
Your javascript would be:
<input id="numero-processo" placeholder="_______-__.____.7.09.009" />
<script>
$(document).ready(function(){
$("#numero-processo").inputmask("9999999-99.9999.7.0\\9.00\\9");
});
</script>
Here's a jsfiddle: https://jsfiddle.net/3kyau2p8/

$("#numero-processo").keyup(function(){
var input = $(this).val();
if(input.length == 15) {
input += ".7.09.009";
$(this).val(input);
}
});

Related

masking input text field with asterisk (*) using Jquery or javascript

Masking input text field with asterisk (*) using Jquery or javascript.
Can anybody give the solution for this.
I have searched a lot and not getting any answer.
Even tried javascript,jquery with pure coding asterisk is coming . The problem is: I'm not able to get the proper value.
$(document).ready(function(){
var val1="",val2="",val3,x,x1,i,asc;
$("#psw").keyup(function(){
//val1=val1+String.fromCharCode(e.keyCode);
val1=$("#psw").val().toString();
asc=val1.charCodeAt(val1.length-1);
if((asc>=97 && asc<=122) || (asc>=65 && asc<=90))
{
val2=val2+val1[val1.length-1]; //actual value
}
//setInterval(function(){},700);
//alert(val1);
//val1=val1+String.fromCharCode(e.keyCode);
x=val1.length;
x1="";
for(i=0;i<x;i++)
{
x1=x1+"*";
}
//$("#psw").val("");
$("#psw").val(x1);
});
$("#psw").keydown(function(){
val3="";
for(i=0;i<val2.length-1;i++)
{
val3=val3+val2[i];
}
val2=val3;
});
Final value which user will enter in textbox with id="psw" will be stored in val2 according to this code.But proper value not coming because of keyup and keydown latency problem.
Is there any alternate solution.
You know, input has a password type, just use it, instead of create yours!
<input type="password" />

Regular Expression - +/- sign and decimal

I am trying to create a regular expression for decimal number and at the same time "-" or "+" sign to be optional at the start.
There are a lot of information about this, so I finished with this:
/^[+-]?\d+(\.\d+)?$/
So, I have tested this in the console using the test() function and it is working perfectly.
My question is more about where to do this check:
if the check is on keypress event I am able to use preventDefault() in order to "consume" the incorrect symbols but I am retrieving the text like this and have no access to the last entered symbol - $(event.target).val()
if the check is on keyup event I have access to the whole text, but I am not able to remove the incorrect symbol, because I do not know which is it, and where it was put in (using the mouse it can be put in the start or in the middle of a valid string)
I need to check combination of symbols, not validate the symbols only. For example:
- //invalid
- 1 //valid
1. //invalid
1.2 //valid
So, I guess I should the check when the whole sting is entered, but then, how two remove the incorrect characters? Removing the whole string on when it is invalid does not look right.
The below is one possible way to tell the user if there is anything wrong with their input as they keep entering. Click here for a sample demo.
In addition, we can also add a <div> listing the allowed characters/format. This in addition to letting the user know that there is something wrong, will also tell them what forms a valid input.
HTML:
<input id='ip' type='text'/>
JS:
var regex = new RegExp(/^[+-]?\s*\d+(\.\d+)?$/);
document.getElementById('ip').onkeyup = function(){
var inputVal = this.value;
if(!(regex.test(inputVal))) this.className='err';
else this.className='noerr';
}
CSS:
.noerr{
color: green;
}
.err{
color: red;
}
Note: HTML5 has inbuilt ways to validate input and also has pseudo-classes like :invalid and :valid to do the same as what the above example does. If you can use HTML5, try this sample. The second input field is done using HTML5 (no JS required).
HTML5:
<input id='iphtml5' pattern='[+-]?\s*\d+(\.\d+)?' type='text' />
CSS:
#iphtml5:valid{
color: green;
}
#iphtml5:invalid{
color: red;
}

jQuery.maskedInput - Switching input masks dynamically

I have a text field that requires a mask. As per the suggestions on other SO threads I am using this jQuery plugin to do this: http://digitalbush.com/projects/masked-input-plugin/.
I am having a problem with it however. There 2 different masks that can be applied to my input field. The decision of which one to use can only be determined after the first 4 characters have been inputed. So here's what I have:
$('#user-input').keyup(function () {
current_val = $(this).val();
if (current_val.replace(/\s*$/, "").length == 4){
mask = determineMask(current_val);
$(this).unmask();
$(this).mask(mask);
}
});
When the line "$(this).mask(mask)" fires, all existing input is removed. Does anyone know how to prevent this package from doing that? Is there another plugin, library, code snippet, etc that would be better at dong what i am trying to do here?

Add a permanent prefix to a textbox

What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?
What I done so far, using jQuery:
//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){
var target = $(this);
var value = target.val().trim();
if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
//country code not found
//if the user starts deleting the country code
if (value.indexOf("+") == 0){
value = "";
}
//if the user types something in front of the country code, put the country code at the end
value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");
//phone doesn't start with +45
value = CONSTANTS.DANISH_PHONE_CODE + value;
target.val(value);
}
});
But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.
You can absolutely position the text (in a span) over the textbox and add a left-margin to it.
This way users won't be able to remove it. But you'll have to add it server side.
Add the +45 as static html before the field. Required the user to enter "the rest" of the number (not the +45).
If necessary, add the +45 server side before persisting the value. Similarly, remove the +45 when editing.
JSFiddle Example
This should actively keep them from deleting "+45" instead of trying to fix the problem after the user as changed it. Upon keypress, determine character position, if the position is too early in the string (i.e. inside the "+45" as oppose to after it) then don't allow the keypress, unless that key is the left or right arrow keys.
Acquired resources:
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
Binding arrow keys in JS/jQuery

Show Input Box on Check

You can see in the paper form attached what I need to convert into a web form. I want it to show the check boxes and disable the input fields unless the user checks the box next to it. I've seen ways of doing this with one or two elements, but I want to do it with about 20-30 check/input pairs, and don't want to repeat the same code that many times. I'm just not experienced enough to figure this out on my own. Anyone know anywhere that explains how to do this? Thanks!
P.S. Eventually this data is all going to be sent through an email with PHP.
I don't think this is a good idea at all.
Think of the users. First they have to click to enter a value. So they always need to change their hand from mouse to keyboard. This is not very usable.
Why not just give the text-fields? When sending with email you could just leave out the empty values.
in your HTML :
//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>
in your CSS:
.hidden{
display:none;
}
.shown{
display:block;
}
in your jQuery:
$('input[type=checkbox]').on('click', function () {
// our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
var inputDisplay = this.checked ? 'shown' : 'hidden';
//from here, we just need to find our next input in the DOM.
// it will always be the next element based on our HTML structure
//change the 'display' by using our inputDisplay variable as defined above
$(this).next('input').attr('class', inputDisplay );
});
Have fun.
Since your stated goal is to reduce typing repetitive code, the real answer to this thread is to get an IDE and the zen-coding plug in:
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
http://vimeo.com/7405114

Categories