I'm presently using jQuery inputmask for the following effect:
It's fairly simple for US & Canada phone number formatting using something like:
$("#user_phone").inputmask("mask", { "mask": "(999) 999-9999" });
I would, however, like to change this formatting context based on the "Country code" dropdown such that when it is United Kingdom, it uses another mask, etc. How would I implement this such that the mask will change context based on dropdown in js/jQuery?
Here's an example of the working source as it is now: http://jsfiddle.net/j9aNh/1/
UPDATE: Okay, I think I've got it working satisfactorily now and would appreciate any advice in terms of drying this up properly: http://jsfiddle.net/j9aNh/3/
I do not know if that what you are looking for but it could be as simple as that I think.
$('select').change(function() {
var country=$(this).val() //or if you want to get text you may use var country=$(this).text()
var maskuse;
if(country=='USA')
{
maskuse="(999) 999-9999";
}
if(country=='Canada')
{
maskuse="(999) 999-9999";
}
/// and soon changing mask for a country
$("#user_phone").inputmask("mask", { "mask": maskuse });
});
if you are looking for Selection of an input mask for a phone number, use inputmask-multi
Related
I have an HTML input field where certain characters shouldn't be allowed. The functional part is solved, but I would like to display a tooltip/message next to the input field while it contains illegal characters.
I have a boolean which keeps track of this, but I've been unable to make a satisfactory tooltip/message.
I've tried tweaking uib-tooltip, but It requires the user to hover over the input area. I've tried making a span/div/label that's hidden/displayed based on the boolean, but my CSS skills aren't strong enough.
The app uses Angularjs and Bootstrap 3.
The input field is not part of a form.
where you catch that boolean just say to display the div next to input like
myDiv.visible = true;
Without knowing your exact Javascript, I can't really answer it directly.
I would do something like
function invalid() {
if (invalid = true) {
document.getElementById("alert").style.visibility = 'visible'
}
}
make sure the error message is set to hidden,
then have the checker function run on focus..
<input type="text" onfocus="invalid()">
https://jsfiddle.net/we67geke/1/
This comment by user Lex solved the problem.
You can manually set the visibility of the uib-tooltip using the
tooltip-is-open attribute. Simply use the same boolean you are using
to keep track of the invalid characters.
As you mentioned
The app uses Angularjs and Bootstrap 3.
I suggest that you should use Boostrap tooltip. Use $('#element').tooltip('show') and $('#element').tooltip('hide') with your flag to handle status of Tooltip.
I don't know how your codes work, my idea seems like:
HTML:
<input type=text (keypress)="eventHandler()"> // angular >= 2
<input type=text ng-keypress="eventHandler()"> // angular 1
Angular code:
eventHandler() {
if (isIllegal) {
$('#element').tooltip('show');
} else {
$('#element').tooltip('hide');
}
}
Something like that.
Bootstrap Tooltip: https://getbootstrap.com/docs/3.3/javascript/#tooltips
I'm trying to find some Bootstrap Autocomplete plugin, to make autocomplete by cities.
For exemple I have such arrow:
{
['Alabama','USA'],
['Alaska','USA'],
['London','UK'],
['Kiev','Ukraine'],
}
and make searching by first letters of city string(country don't take).
The most nice plugin that I've found: https://twitter.github.io/typeahead.js/examples/
But in it searching goes by all entered symbols.
So:
i'm looking for autocomplete by name of city by first symbols, and shows with country;
if I wrote "Al", select box must show:
Alabama, USA
Alaska, USA
with highlited "Al".
Maybe will be good idea change arrow to strings like:
['Alabama, USA', 'Alaska, USA', 'London, UK','Kiev, Ukraine']
?
I think what you are looking for is select2 : https://select2.github.io/
You can check out the example here : https://select2.github.io/examples.html
You may also want to arrange your array to something like this:
{
['Alabama, USA'],
['Alaska, USA'],
['London, UK']
}
I have been using MagicSuggest pluggin since years. Very easy to manage, it will provides you auto suggestion and auto select too.Plenty of options are available.
Please have a look at MagicSuggest demo.
For documentation see here
Have a look on sample codes
To download please go to GitHub
As per my understanding it might help you. If you found any difficulties feel free to ask.
Thanks
I'm trying to create an input mask, which collects two different values from the user. In the end the input mask should look like this:
[X.XXX$ for X years]
Where the X is an input by the user. Ist that possible? I've tried by using the jQuery Plugin inputmask and the code above:
$(document).ready(function(){
$('.query').inputmask({
mask: '9.999$ for 9?9 years',
placeholder: '1.000$ for 2 years'
});
});
The input mask doesn't work like I expected. It mixes the placeholder with the input values, what doesn't make sense to me. Can anybody help me with that issue?
Thanks a lot!
I see you're using this inputmask
The mask is getting into a funky state because there are some out-of-the-box definitions for y and a, which are being interpreted since they aren't being escaped. If you want to look at all the other default definitions, then open up your debugger and take a look at $.inputmask.defaults.definitions, or just take a look at the script.
You can escape a definition in the mask by using \\
update your script to the following and you should be good to go.
Here's a link to a fiddle if you want to experiment with it.
$('.query').inputmask({
mask: '9.999$ for 9 \\ye\\ar',
placeholder: 'X'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input class='query' type='text' />
I have this fiddle, it's pretty cool, my first attempt at creating a jquery control. It is simple, just a star ratings control.
I want to be able to turn this into a control, so that, I can call:
$('#someDiv').starRating();
And it turns that div into a star rating.
I would like to be able to then setup some properties:
Empty Star Source
Hover Star Source
Star Rating (leave blank if new rating)
So it would look something like this:
$('#someDiv').starRating({
emptyStarSource : 'http://www.imageland.com/image.png',
hoverStarSource : 'http://www.imageland.com/image.png',
initialRating : 3
});
Similar to the Datepicker in how to change options etc.
If anyone could point me in the right direction that would be awesome!
EDIT
So I have had a go with the help of the answer I got. The img click events aren't working, I'm guessing that somehow I have to attach the click handlers after I append them to the page. how? After that, I just need to do the settings!
ratings control
To write a plugin in jQuery use the following syntax
$.fn.setRed = function(){
return $(this).each(function(){ //this is required for jQuery chaining to work and also if multiple html objects are passed
var _obj = $(this);
//work on the object here
_obj.css("background-color", "red");
});
}
You can then use
$(".ratings").setRed();
I have an interactive/editable table that does a number of things when a cell value is changed using onChange="myfunction". The problem is that I need to have a few validations:
maxlength = 1
only letters ^[a-zA-Z]+$
cannot be blank...require = true
However I fear that due to using onChange I may not be able to achieve this.
Here is a working example of my table: http://jsfiddle.net/JEAkX/32/
Here is the jQuery validator code I am hoping to get to work:
$.validator.addMethod(
"legalValue",
function(value, element) {
return this.optional(element) || /^[a-zA-Z]+$/.test( value );
},
alert("Bad Value!")
);
$(document).ready(function() {
$("#wholeTable").validate({
rules: {
cell: {
legalValue: true,
required: true,
maxlength: 1
}
}
});
});
Is it possible to make this work given my current setup using onChange? If not what direction would you recommend taking to converting to a system that would allow for this validation.
If I stay with onChange do I need to great a global array to house the values of the table in the case that someone enters something incorrect and the value is reverted so the table doesn't change?
just had a look at your sources, I'm not sure I understand what is your problem, but your code has one mistake:
<script type="text/javascript" scr="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>
should be
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>
not pushing you to solve the puzzle what's the difference is, I could say that path to script file is specifying using src attribute rather than using scr. After I changed that, when I enter "4" in any field, I get warning message about mistake etc. Also I can't enter few characters... So look like it works.. Was it the problem, or I didn't get your question?