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?
Related
I have one more input box - ibox2, on the same page.
Problem - After doing anything on ibox1 and leaving value of length > 5 there, if I start typing in ibox2 the focus jumps back to ibox1.
It is that if loop with ibox1.focus() that is doing it. How could I remove focus entirely from ibox1 upon clicking outside and nullify the if loop and its statements.
I tried blurbut it did not work.
var ibox1 = $("#inputbox1");
$(document).on("change", ibox1,function(e) {
var valu = ibox1.val();
if(valu.length > 5){
#do something
ibox1.focus(); #used this as input box lost focus with each charater typed.
}
});
var ibox2 = $("#inputbox2"); #This is for google places autocomplete.
PS - Please do not tag it as a duplicate one, I have tried almost everything here, and only then I posted this. I shall remove it upon getting solution.
Respected mods, I followed a nice accepted answer and made a mistake about understanding $('document'), but I now got it cleared. That's the reason I am not deleting this question, even though I said I would, as it might help others. You guys, if
you feel, could delete this. Thanks.
The focus is jumping back to ibox1 because you are instructing your document to do so each time the onChange event is fired.
e.g.: $(document).on("change", ibox1, funct... where you are calling for ibox1.focus(); `.
Possible solution: bind your change event to the element of interest itself and avoid binding an event of such local significance to the whole document in the future.
Use a simple method to attach an event to inputs. Check below code it may help you.
(function(){
var in1 = jQuery('#input1'); // first input
var in2 = jQuery('#input2'); // second input
// On change of first input
in1.change(function(){
if(this.val().length > 5){
// do something
}
});
// On change of second input
in2.change(function(){
if(this.val().length > 5){
// do something
}
});
})();
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);
}
});
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
Hallo,
I have to write a little java script and have no idea how and I thought that for a real JS Programmer it would be real easy to just tell me instead of me searching the web for hours.
Simple Problem:
I have some boxes with name TrackSelectPos_1 - TrackSelectPos_7.
If one of those change I want to check if the value of the box is -1. If it is disable all the boxes with a higher number and set there value to -1. If the value is not -1 enable the box on the right (the box one higher).
So the basics things that I want to do are:
1. How to get the value
2. How do I disable/enable a box
Thanks for your help.
At the very basic level, assuming one of your textbox id is TextPOS_1
//1. Value
var valueTB1 = document.getElementById('TextPOS_1');
alert (valueTB1 .value);
//2.To Disable
valueTB1.disabled = true;
You would need to wrap the above in a JavaScript Function...so that you can handle any number of textboxes.
Let me know if this helps and you need more clarification...
Assuming TrackSelectPos_1 is the id of your text box:
var box1 = document.getElementById('TrackSelectPos_1');
var box2 = document.getElementById('TrackSelectPos_2');
// This does it for only one text box. You'd need to also perform the same for boxes 3 through 7.
if(box1.value == '-1'){
box2.disabled = true;
} else {
box2.disabled = false;
}
I'm using the jQuery Autocomplete plugin. I have two input fields on a form, inputfield1 and inputfield2.
I attached autocomplete to the first field. When the that field loses focus, I want to check if a value was entered and if so, then make an AJAX call to retrieve some "\n"-separated strings and use them to drive autocomplete on the second field.
Below is the code I'm using to do that:
/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>");
$("#inputfield1").blur(function(){
// Attach autocomplete if inputfield1 field is not empty
if($("#inputfield1").val() != ""){
var url = "<url2>?q="+$("#inputfield1").val();
$.get(url,function(data){
result=data.split("\n");
$("#inputfield2").autocomplete(result);
});
}
});
But a strange thing is happening: I am able to attach autocomplete to the first field successfully, but I have to give focus twice to the second field in order to use autocomplete on it. Is there any way to fix this problem?
Try this simplified test. If this works check if your result really contains what you think (alert it or write it to console). There could be other characters after splitting (namely whitespace (leading spaces, \t or \r) try trimming every value of the result array.
var data1 = ["a123", "b123", "c123", "d123", "e123", "f123", "g123", "h123", "i123", "j123", "k123", "l123", "m123", "n123", "o123", "p123", "q123", "r123", "s123", "t123", "u123", "v123", "w123", "x123", "y123", "z123"];
var data2 = 'a123\nb123\nc123\nd123\ne123\nf123\ng123\nh123\ni123\nj123\nk123\nl123\nm123\nn123\no123\np123\nq123\nr123\ns123\nt123\nu123\nv123\nw123\nx123\ny123\nz123';
$("#inputfield1").autocomplete(data1);
$("#inputfield1").blur(function(){
if($("#inputfield1").val() != ""){
var result=data2.split("\n");
$("#inputfield2").autocomplete(result);
}
});
I found this code in the current version of the autocomplete plugin:
.click(function(event) {
$(target(event)).addClass(CLASSES.ACTIVE);
select();
// TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
input.focus();
return false;
It seems to put focus back on itself after a click. This might be messing you up.
Instead of handling the blur() event, maybe you'll have better luck if you handle the autocomplete plugin's result() event.
/*Receive data from server for autocomplete*/
$("#inputfield1").autocomplete("<url1>");
$("#inputfield1").result(function(event, data, formatted){
// Attach autocomplete if inputfield1 field is not empty
if(data){
var url = "<url2>?q="+data;
$.get(url,function(data1){
result=data1.split("\n");
$("#inputfield2").autocomplete(result);
});
}
});
Make sure you're using the latest version of the Autocomplete plugin. There was a bug in versions prior to 1.1 where if you enabled autocomplete on a field after that field had focus (as would happen in your example if you tabbed from the first input field directly into the second) it wouldn't work properly until focus was lost and then restored again...
Here's a quick demo that shows this construct working with the latest Autocomplete version.
You say you need to select #inputfield2 twice so the autocomplete event binds to it, right?
I'm just thinking.. can it be possible that you are using your tab key on your keyboard to select #inputfield2 and when that doesn't work you select #inputfield2 with your mouse? If so, isn't it possible that the #inputfield1 blur event doesn't kick in until you "unselect" it with your mouse (maybe some kind of bug)?
I haven't tried this, it's just a thought.