Jquerymobile input mask? - jquery-plugins

I need an input mask for numerics, like "9999.99" - or "9999.9" . I know there are plugins for jquery in general - question is: Has anybody used one with jquerymobile? Thanks gang!

this plugin seems nice on desktop, but for some reasons it has some problems on mobile devices (tested on android 2.3.3).
2 problems I had :
with $('#someInput').mask("99/99/9999",{placeholder:"."});
when I type 12345678, I obtain 12/45/7863 (some problems when placing the '/'s)
when I try to give a value (calculated before but editable) it put the '../../....' in place when I focus the input.
Do someone have a workaround or a more mobile device friendly mask plugin?
Edit: After a lot of tries and failures, it seems the problem is not in the masked input plugin (which is not realy a news as it works perfectly on desktops and Ios) but it's the way android manage the modification of the value of a focus input.
When you add a character, it display it well but remember where the cursor was and do not move it so when you type afterward it seem's it go back before the adding.
I tried to do the trick by adding a setrange but it seems to don't account the added characters. Out of ideas I did it by filtering input on keypress, spacing the characters in the input and putting an image of / / in the background.
I'm still open to anything which could be cleaner.

There's awsome plugin to use in jquery in http://digitalbush.com/projects/masked-input-plugin/
It work awsome when used in pc. But when i try on opera mobile emulator. It messed up.

This jsFiddle link working with phone
The HTML is:
<form id="contact_info_form">
Cell Phone: <br/>
<input type="text" value="" class="input-phone" name="Q3" id="Q3" />
</form>​
And the Javascript:
$(function(){
$(".input-phone").mask("(999)-999-9999");
});​

Recently I have developed simple and easy input mask on input field to US phone format jquery-input-mask-phone-number
Just Add jquery-input-mask-phone-number plugin and call usPhoneFormat Function.
$(document).ready(function () {
$('#yourphone').usPhoneFormat({
format: 'xxx-xxx-xxxx',
});
});
Demo Example https://jsfiddle.net/1kbat1nb/
NPM URL https://www.npmjs.com/package/jquery-input-mask-phone-number
GitHub URL https://github.com/rajaramtt/jquery-input-mask-phone-number

Related

Building an add-on to hide a <div> block on an HTML page

There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.
I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.
Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?
Right, I got it:
Using just a standalone Firefox Add-On use the following code:
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.ca",
contentScriptWhen: 'end',
contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
});
};
Just replace DIVID with whatever you want.
Similarly, in Greasemonkey, just add this to the script:
document.getElementById('DIVID').style.visibility='hidden';
The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!
Install the latest FF
Install the latest AdBlock Plus
Go to the website right click on specific element and then Inspect Element(Q)
Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule
You can just use GreaseMonkey which is a very useful plugin for firefox. You can write your own script in JavaScript which operates on the page.
However, chances are that someone might have already written a script for the site in question that you can install from the http://userscripts.org/ repository.
In well-formed HTML, any particular value for the id attribute should occur at most once in a document. If your mission is to seek and destroy a recurring phenomenon, it might be labeled (if at all) with a class. This is the case with Twitter's "promoted tweets", for example.
var promotedTweets = document.getElementsByClassName("promoted-tweet");
for (k=0; k<promotedTweets.length; k++) {
promotedTweets[k].parentNode.removeChild(promotedTweets[k]);
}
Wouldn't Adblock Plus do the trick here? You can feed it an element hiding rule (based on the class or ID attribute) on any given website, if I recall correctly.
I used the up-and-coming jpm tool to write this, and incorporated the suggestions here. It is specifically for filtering certain div tags here on StackOverflow—how fitting. The code and the xpi add-on file is at Github.
An alternative in Firefox is to create a userContent.css file and add css which hides the div.
See https://superuser.com/a/319322/ and note the comment which points out that "Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true".

jQueryMobile-Timebox issue with overrideTimeFormat

I'm trying to use jQM-DateBox with data-option timebox in Force Clock Mode, to have a 24h range of hours, as shown here:
[enter link description here][jQM-DateBox Time]
I've simply copy pasted the code in my app
<label for="mydate">Time </label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFormat": 24}'>
and it still keep showing me AM/PM mode.
Anyone else noticed this behaviour? Any idea how to resolve it?
Note that in the link above (same code!) everything seems to work properly, and I have no other problems with other jQM-DateBox Mode.
Thank you.
You'll need to override timeOutput too - i.e. "overrideTimeOutput":"%k:%M"
To be perfectly honest, I don't remember why I stopped doing the auto-switching - I think when I realized that the time output changes from locale to locale (if you are writing for a single locale, this is the easier way to handle it). Otherwise, my assumption was that you'd need it in the format that the server expected, in which case you'd want to override it anyways.
#J.T.Sage I meant the picker shows 12hr mode anyway
To anyone: I'm Italian so i "risolved" downloading this .js file Italian .js script for timebox
and changing timeFormat: 12 statement with timeFormat: 24.
It's a trick, but it works.
Bye, thanks.

How to put space in tab title in dojo?

i am using dojo toolkit with php codeigniter 2.1.0 and i want to put space in tab name wherever necessary.
Anyone has any solution??
My code is :
<div id="setupParty" data-dojo-type="dijit.MenuItem"
onclick="addPartyTab('AddParty');">Manage <u>P</u>arty</div
If i will directly write as :
<div id="setupParty" data-dojo-type="dijit.MenuItem"
onclick="addPartyTab('Add Party');">Manage <u>P</u>arty</div
then it throws error
I want my tab to be displayed with name as "Add Party"
can anyone suggest me solution for this???
Thanx in advance
What error does it throw?
how does the code in addPartyTab look like?
The following should work in any case:
onclick="addPartyTab('Add Party');">
However, this may not be an ideal solution. You need to look into your addPartyTab function to first, ensure the text with embedded space is coming through fine (and i dont see any reason why it shouldnt) and then examine the code in that function to ensure it is being processed correctly - i suspect somewhere in there you will find why it is breaking.
In general, you can set title on a dijit tab (which is typically a contentpane) directly even if the title contains spaces without any issue. Following is a typical way of doing it:
dijit.byId("myTabContentPane").set("title", "Add Party - Hurray!");
where myTabContentPane is the id of the contentpane that makes up that tab

Can the behaviour of new HTML5 form types be overridden?

I was wondering if anyone knew if it were possible to override the default behaviour of browsers that support the new HTML input types such as type="email" and type="date"?
I appreciate that I could test if a browser supports an input type and provide a fallback for those browsers that don't, but what I want to know is is there any way to prevent that default behaviour from happening in browsers that do support it?
For instance, if in Opera I want to use the date input type, but I don't want Opera to display the native datepicker (i.e. I want to replace it with my own custom one) is that possible? Are there any DOM events triggered like onDatePickerShow that one can hook into?
I don't believe that this is possible, but if anyone knows for sure one way or the other I would love to hear from you.
input type=date without datepicker is almost the same as input type=text. If you want to keep validation, then you might use pattern attribute instead.
There's no way to customize look'n'feel of the standard date picker. There are no events for the picker. Spec doesn't define any UI for pickers. Consider how wildly different pickers can be – compare one you get on desktop with picker on the iPhone.
In the future CSS might get pseudo-classes for some customizations of date picker (and file picker), but currently it's all-or-nothing.
Disable validation of HTML5 form elements
If you add a novalidate attribute, then for example you can enter an email without an #
This only seems to disable the client side HTML5 validation.

How can I prevent Firefox's Autocomplete?

There's several section of our site where the user needs to enter some information, and Firefox's auto fill takes over when the page loads - mostly incorrectly!
For example, there's a "Fax Number" field that for some users Firefox keeps filling in with their email address. If they don't see this and they go to submit the form out validators complain to them that it isn't a valid number format.
This really has our sales guys worried because when they go to look at a customers page, they sometimes see it filled in with their own personal info.
Is there any way to prevent Firefox from doing this?
Add autocomplete="off" to your form tag, as documented in the Mozilla document How to Turn Off Form Autocompletion
<form name="form1" id="form1" method="post" autocomplete="off"
action="http://www.example.com/form.cgi">
[...]
</form>
Do read the section on exceptions and workarounds though - the browser will ignore the autocomplete attribute if you have a Name or Address field in the form!
If you don't care about validation, you can use autocomplete="off"
BTW here's a great article from Mozilla themselves about autocompletion
Firefox usually autocompletes based on the field names, so it sounds to me like you might have some underlying confusion with what your fields are called.
I ran into the same problem on Firefox with forms having a 'username' and 'password' field. In this case autocomplete="off" doesn't seem to work, as stated here: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion (bottom of page).
The only way I found right know to have en empty fields when opening the page is to empty them in javascript. jQuery code example:
setTimeout(function(){
$('input[name="username"],input[name="password"]').val("");
}, 0);
I know it's ugly (especially the setTimeout but I couldn't figure another way. Even putting this in $(window).load() doesn't seem to work.
Try to use dynamic input names.
If autocomplete="off" in the form fails, try using autocomplete="off" in the input field directly and hit Ctrl + F5.
Actually, since a few weeks I've noticed Firefox started mixing autofill values, dropdownlists show entries even from different sites. They probably broke something in their recent builds. Now some personal entries can be seen by people just asking to check mails on your pc. Desire to block this feature is now very understandable.

Resources