I am having an issue combining Int-tel-input (Country code telephone number selector plugin) with input masking.
What I am trying to accomplish here is to allow a user to select a country code from the country dropdown provided by the Int-tel-input plugin and then apply a mask over that to ensure that the user conforms to the number format.
Here is my current implementation (coffeescript):
//When a country flag is clicked
$(document).on 'click', '.country', ->
//Get the country code
code = "+" + $(this).data('dial-code')
//Find the input
elem = $(this).parents(".intl-tel-input").find("input")
//Clear the input
$(elem).val("")
//Mask input with country code
$(elem).inputmask({
mask: (code)+"99 999-9999",
clearMaskOnLostFocus: false
});
//Clear masked input to ensure mask is clear
$(elem).val("")
The issue I am running into is that if the country code contains a 9 the masking plugin will replace that character in the country code with a masking space. Example:
I want the input to look like : +394 -_-____
The result I am getting looks like : +3_4 -_-___
Note: The above implementation works perfectly with country codes which do not contain a 9.
Any help is appreciated!
Related
I am using jquery.meio.mask to format a date in a textbox which is having datepicker attached to it. Everything is working fine except that when the user manually enters a date after he enters the 3rd digit (after the first /) the cursor is coming infront of the 3rd digit and when he enters the 4th digit it is replacing the 3rd digit he entered which results in missing one digit every time. I am setting the mask to the text field using the below code,
$('#txtFrom,#txtTo' ).focus(function() {
$( this ).setMask({
mask : '19/39/2999'
});
});
I am new to Jquery. Could some one help me how to solve this.
Try To implement This way:
$(document).ready(function(){
dateMask($('#txtFrom'));
dateMask($('#txtTo'));
});
function dateMask(element)
{
$( element ).setMask({
mask : '19/39/2999'
});
}
I'm using jQuery Masked Input Plugin with jQuery Validation Plugin. When a field of the form loses focus, the jQuery Validation Plugin shows a message but that's not happening to the fields that are bound to masks, perhaps because the blur event happens and verifies that the field is not empty, actually the field is filled out with the mask.
So I override the required method of the validation plugin so as to verify the mask too. Since I have telephones masks I cannot hard code a mask, I would have to call a method in the plugin that returns me the mask bound to the field. I didn't find the documentation of the masked input plugin and nobody with my problem.
Does anyone know if there's a method that return me the mask itself bound to the field?
I use a masked input for phone fields and verify that there is a phone number present with minlength like so:
...
phone: {
required: true,
minlength: 17
},
My mask looks like this:
+1 (XXX) XXX-XXXX
Given the way the plug-in ( jQuery Masked Input Plugin) is built Tomanow's approach is the way to go.
If the input size can only have the same amount of characters than the mask.
I would suggest this method :
Complementary plugin
(function($) {
$.fn.extend({
mask2: function(mask, settings){
//store in data
this.data('data-mask',mask);
this.data('data-maskLength', mask.length);
//add data attributes as html markups (optional)
this.attr('data-mask',mask);
this.attr('data-maskLength', mask.length);
// add validator rule (see section add custom method; i haven't test it yet you can remove it if necessary)
$( "#myinput" ).rules( "add", {
maskRule: true
});
// add original mask plugin
return this.mask(mask, settings);
}
});
})(jQuery);
Now instead of using mask you use mask2
$("#date").mask2("99/99/9999");
Add a custom Validation method
The easiest way is to use the data-maskLength key , (you may need to put this on top):
jQuery.validator.addMethod("maskRule", function(value, element, params) {
return value.length == element.data("data-maskLength");
}
I havent test the validation Method but at least you can retrieve the mask or its length
You can see what i did on JsFiddle
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?
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
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