I'm trying to achieve a special masked input in HTML using jQuery and themask plugin from Igor Escobar (http://igorescobar.github.io/jQuery-Mask-Plugin/)
I need write only numbers[0-9] and the following conversions:
input:
123456789
12345678
1234567
123456
desidered output:
123.456.789
12.345.678
1.234.567
123.456
Is possible achive this with that plugin?
Or exist another way to do it?
Thanks for reading :)
EDIT:
I did it using another plugin (Numeral.js):http://numeraljs.com/
This is my working code:
$("#myinput").blur(function()
{
this.value=numeral(this.value).format('0,0[.]00').replace(/\,/g, '.');
});
But I do not like to be validated at the end, ie (onblur), is there any way to do this on the fly? - That is, gradually validate (keypress).
You probably don't need a library for that. I kept jQuery but it's really used to select the input, so you definitely can ditch it quite easily.
$("#myinput").keyup(function(){
// prevent every character except numbers
if(!this.value.slice(-1).match(/^[0-9]+\.?[0-9]*$/) ){
this.value = this.value.slice(0, -1);
return;
}
// remove the dots, split the string and reverse it
var a = this.value.replace(/\./g, '').split('').reverse();
// start from 3 and as long as there's a number
// add a dot every three digits.
var pos = 3;
while(a[pos] !== undefined){
a.splice(pos,0,'.');
pos = pos + 4;
}
// reverse, join and reassign the value
this.value = a.reverse().join('');
});
You can try it yourself here and see if it does the job. Hope it helps.
EDIT: while the above code works it has some shortcomings, such as:
it does not work when copy/pasting
it does not allow moving with arrow keys
the cursor always goes to the end of the input, even when you are inserting a number in the middle.
As I needed it with full support for those cases I evolved it in a tiny script you can find on Github along with a demo and test spec.
$("#myinput").on('keyup keydown blur', function() {
this.value=numeral(this.value).format('0,0[.]00').replace(/\,/g, '.');
}
Related
I guess that should be smth very easy, but I'm stuck with that for at least 2 hours and I think it's better to ask the question here.
So, I've got a reg expression /&t=(\d*)$/g and it works fine while it is not ?t instead of &t in url. I've tried different combinations like /\?|&t=(\d*)$/g ; /\?t=(\d*)$|/&t=(\d*)$/g ; /(&|\?)t=(\d*)$/g and various others. But haven't got the expected result which is /\?t=(\d*)$/g or /&t=(\d*)$/g url part (whatever is placed to input).
Thx for response. I think need to put some details here. I'm actually working on this peace of code
var formValue = $.trim($("#v").val());
var formValueTime = /&t=(\d*)$/g.exec(formValue);
if (formValueTime && formValueTime.length > 1) {
formValueTime = parseInt(formValueTime[1], 10);
formValue = formValue.replace(/&t=\d*$/g, "");
}
and I want to get the t value whether reference passed with &t or ?t in references like youtu.be/hTWKbfoikeg?t=82 or similar one youtu.be/hTWKbfoikeg&t=82
To replace, you may use
var formValue = "some?some=more&t=1234"; // $.trim($("#v").val());
var formValueTime;
formValue = formValue.replace(/[&?]t=(\d*)$/g, function($0,$1) {
formValueTime = parseInt($1,10);
return '';
});
console.log(formValueTime, formValue);
To grab the value, you may use
/[?&]t=(\d*)$/g.exec(formValue);
Pattern details
[?&] - a character class matching ? or &
t= - t= substring
(\d*) - Group 1 matching zero or more digits
$ - end of string
/\?t=(\d*)|\&t=(\d*)$/g
you inverted the escape character for the second RegEx.
http://regexr.com/3gcnu
I want to thank you all guys for trying to help. Special thanks to #Wiktor Stribiżew who gave the closest answer.
Now the piece of code I needed looks exactly like this:
/[?&]t=(\d*)$/g.exec(formValue);
So that's the [?&] part that solved the problem.
I use array later, so /\?t=(\d*)|\&t=(\d*)$/g doesn't help because I get an array like [t&=50,,50] when reference is & type and the correct answer [t?=50,50] when reference is ? type just because of the order of statements in RegExp.
Now, if you're looking for a piece of RegExp that picks either character in one place while the rest of RegExp remains the same you may use smth like this [?&] for the example where wanted characters are ? and &.
Well actually my problem is very tiny .. You need glasses to see it :-). Ok please do the following:
run the code snippet
write ..! into the textarea
then write an space after it
then write س after it
now as you see, the space between dots in ..! will be changed.
Why? Again, the problem is really negligible, but it is on my nerves. Why when I set a direction to the textarea (like rtl), the value of that textarea will be changed (a bit) ?
Here is my code:
$("body").on('input', 'textarea', function() {
var el = $(this);
var len = el.val().length;
// declare direction of comment in textarea
var x = /^[^a-zآ-ی]*[a-z]/i; // is ascii
var isAscii = x.test(el.val());
if(isAscii){
el.css("direction", "ltr");
} else {
el.css("direction", "rtl");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>dynamic direction</textarea>
By the way, to be more clear what I'm talking about, following image is a screenshot. As you see the number of dots are identical in both cases, but the second one is wider. Why?
This is due to character encoding. When we talk about RTL the character encoding set to UNICODE which is the super set of ASCII code (alphabets + Symbols).
RTL script used for Persian, Arabic, Urdu etc.
Unicode takes more space while typing. You can read more about RTL and Unicode here
I am facing the following problem: I have to calculate the remaining characters in a textarea. It is a simple task and there's a lot of reference for doing such things. The piece of code I created to do this is bellow. Everything works fine an so, but, the QA team did this: they cut and pasted a piece of text of a txt document and they pasted till they reached the maximum of text allowed in my textarea. But what happens is that even when the max of characters is not reached the user cant type anymore.
And also if I erase some characters using the backspace I cant type anymore.
Let me be more specific. Let's say that the last word is "nerd" and the remaining characters is "47". The code doesn't allow me to write more and even if I use the backspace and have "ner" I cant type a single more letter!
The fiddle bellow has the scenario to check what I am saying. You can paste the text that is in the comment of the html section of my fiddle to state what I am talking about. Thanks in advance for any help.
http://jsfiddle.net/sLr8co1n/4/
GIF: http://gifmaker.cc/PlayGIFAnimation.php?folder=2015020423hlKs7Ki7knoQBCZAoSaQNN&file=output_rwGbzN.gif
$("#textAreaComplemento").bind("keyup change", function (e) {
calculaCaracteresRestantes();
});
var text_max = 200;
function calculaCaracteresRestantes() {
if ($('#textAreaComplemento').val() == undefined) {
return false;
}
var text_length = $('#textAreaComplemento').val().length;
var text_remaining = text_max - text_length;
$('#textarea_feedback').html(text_remaining);
return true;
}
After testing and playing around in Fiddle, I could figure out that basically the line "$('#textAreaComplemento').val().length" is finding out the number of characters only (and not counting the number of spaces, like in this case there are 4 spaces before return false ). Hence, when you copy, paste something (say your code which has 5 spaces in between it), then the user can enter only after deleting 6 letters which makes the total count as 194 (200-6) + 5 (spaces) + space for one letter to be entered.You can probably use something like this to avoid any spaces or carriage returns being counted by the browser and just consider the letters:
$(function () {
$('#test').keyup(function () {
var x = $('#test').val();
var newLines = x.match(/(\r\n|\n|\r)/g);
var addition = 0;
if (newLines != null) {
addition = newLines.length;
}
$('#length').html(x.length + addition);
})
})
Something like this might help u mate.. :)
$("#textAreaComplemento").bind("keyup change input propertychange", function (e) {
calculaCaracteresRestantes();
});
Fiddle
Currently I'm using jquery.maskedinput for verious mask formats, but it's not working for phone numbers.
In Brasil we used to have all numbers in the format (99)9999-9999. But lately, in a few cities, cell phones are using (99)99999-9999, while their normal phones and the rest of the country remain (99)9999-9999.
jquery.maskedinput seems to not support 2 formats on the same input where a character in the middle of the string may or may not be present. As I can see in its documentation, I could have (99)9999-9999 and (99)9999-99999, but that would confuse users.
Is there any other mask plugin/framework that allows me to validate both (99)9999-9999 and (99)99999-9999?
Edit: I created a full test using harry and Dmitrii solutions: http://jsfiddle.net/NSd6g/ $('#full').inputmask('(99)9999[9]-9999');
I'm gonna wait a bit more to see if I can find an even better solution. The perfect one wouldn't require the red message, second group would have 4 digits by default. And, if third group would get a fifth digit, only then second group would get its fifth space, moving third group's first digit into second group's fifth. lol kinda hard to understand, sorry!
You could achieve this using jquery.inputmask as simple as:
jQuery(function($) {
$('#test').inputmask('(99)9999[9]-9999');
});
Try this demo.
To skip the optional part while typing into the input you need to type space or the char following the optional part in the mask (hyphen in this case).
I'm Brazilian too.
At my job we don't actually use the "-" char in the middle for those type of masks, so there's no confusion... the final mask would be the following: (99)99999999?9
It's a bit harder to the final user to identify a wrongly typed phone number this way, but it works.
Another way I know is building the regex in JS and then using it with another plugin, like, for example, jQuery Validate.
With jQuery mask you can only have the trailing characters be optional. Not ones in the middle on the input.
My suggestion would be to have 3 input boxes, one for each part of the number with the optional character at the end of the middle input. Then concatenate the inputs on submit.
like so:
(<input id="phone2" />)<input id="phone3" />-<input id="phone4" />
jQuery(function($){
$("#phone2").mask("99");
$("#phone3").mask("9999?9");
$("#phone4").mask("9999");
});
See fiddle: http://jsfiddle.net/Rge83/1/
To make it more user friendly, a script to move to the next input once the current one has been filled can be added + some css to make the inputs look more like one.
My suggestion: "(99) [9] 9999-9999"
//Configuração para celular com nono digito
$('#Seletor').focusout(function () {
var phone, element;
element = $(this);
element.unmask();
phone = element.val().replace(/\D/g, '');
if (phone.length > 10) {
element.mask("(99) 99999-999?9");
} else {
element.mask("(99) 9999-9999?9");
}
}).trigger('focusout');
Some updates 10 years later:
jQuery is still alive (yes!)
all mobiles in Brazil have 9 digits now (besides 2 digits from area code)
all Brazilian landlines still have 8 digits (besides area code)
So in order to have a field accepting both mobiles or landlines I prefer a dynamic mask that will automatically adjust itself to "5+4" or "4+4" depending on how many digits were typed.
Example:
$('#ContactPhone')
// by default we expect a mobile (5+4 digits)
// so the initial mask splits 5+4 and if someone pastes 9 digits
// the separator position won't be changed causing a blip
.inputmask('(99) 99999-999[9]')
.on('change keyup paste', function () {
var digits = $(this).val().replace(/\D/g, '').length;
// ... if there are only 8 digits we reformat as 4+4 -
// but yet letting space for another digit (which would reformat the mask back to 5+4)
if (digits == 10)
$(this).inputmask('(99) 9999-9999[9]');
else
$(this).inputmask("(99) 99999-9999");
});
I am trying to build a sort of intelli-sense text input box, where as the user types, the 'and' is replaced by 'AND \n' (i.e. on each 'and', the 'and' is capitalized and user goes to new line).
The Javascript I used for this is:
function Validate()
{
document.getElementById("search").value = document.getElementById("search").value.replace("and","AND \n"); //new line for AND
}
The HTML part is like this:
< textarea type="text" name="q" id="search" spellcheck="false" onkeyup='Validate();'>< /textarea>
Though the above script works well on Firefox and Chrome, it sort-of misbehaves on Internet Explorer (brings the cursor to the end of the text on each 'KeyUp').
Also the above code doesn't work for the other variants of 'and' like 'And', 'anD' or even 'AND' itself.
I think the actual answer here is a mix of the two previous:
onkeyup="this.value = this.value.replace(/\band\b/ig, ' AND\n')"
You need the i to make the search case insensitive and the g to make sure you replace all occurrences. This is not very efficient, as it'll replace previous matches with itself, but it'll work.
To make it a separate function:
function validate() {
document.getElementById('search') = document.getElementById('search').replace(/\band\b/ig, ' AND\n');
}
If you alter the textarea contents while the user is typing the caret will always move to the end, even in Firefox and Chrome. Just try to edit something you already wrote and you'll understand me. You have to move the caret to the exact position where the users expects it, which also implies you have to detect text selections (it's a standard behaviour that typing when you have a selection removes the selected text).
You can find here some sample code. You might be able to use the doGetCaretPosition(), setCaretPosition() functions.
I tried to work around the problem and solved by using the following javascript:
function Validate() {
if( document.getElementById("search").value.search(/\band$(?!\n)/i) >= 0 ){ // for maintaining cursor position
document.getElementById("search").value = document.getElementById("search").value.replace(/\band$(?!\n)/i,"AND\n"); //new line for AND
}
}
Thin slicing the above problem and solution:
1) The function was being called on each key up, thus earlier "AND\n" was being repeated on each key up, thus inserting a blank line on each key press. I avoided the above by using the regex:
/\band$(?!\n)/i
\b = Like Word (to avoid SAND)
$ = End of line (as "and" will be replaced by "AND\n" thus it will always be end of line)
(?!\n) = Not followed by new line (to prevent repeatedly replacing "AND\n" on each key press)
i = To cover all variants of "and" including "And","anD" etc.
2) Internet Explorer was misbehaving and the cursor position was not maintained (moved to end) when the input was re-edited. This was caused (as hinted by Alvaro above) due to the replace function.
Thus I inserted an "if" statement to call replace function only when it is needed, i.e. only when there is some "and" needing replacement.
Thanks everyone for the help.
try using the following replace() statement:
replace(/\band(?!$)/ig, "And\n")
since this is being called repeatedly against the altered string you have to make sure that the "and" is not followed by a line break.
example (uses a loop and function to simulate the user typing the letters in):
function onkeyup() {
var str = this;
return this.replace(/\band(?!$)/ig, "And\n");
};
var expected = "this is some sample text And\n is separated by more text And\n stuff";
var text = "this is some sample text and is separated by more text and stuff";
var input = "";
var output = "";
for(var i = 0, len = text.length; i < len; i++ ) {
input += text.substr(i,1);
output = onkeyup.call(input);
}
var result = expected == output;
alert(result);
if( !result ) {
alert("expected: " + expected);
alert("actual: " + output);
}
you can test this out here: http://bit.ly/8kWLtr
You need to write a JS code that run in both IE and FireFox. I think this is what you need:
var s = document.getElementbyId('Search');
s.value = s.value.replace('and', 'AND \n');
I think you want your replace call to look like this:
replace(/\band\b/i,"AND \n") (see below)
That way it is not case sensitive (/i), and only takes single words that match and, so 'sand' and similar words that contain 'and' don't match, only 'and' on it's own.
EDIT: I played around with it based on the comments and I think this working example is what is wanted.
Replace the onKeyUp event with onBlur:
<textarea type="text" name="q" id="search" spellcheck="false" onblur='Validate();'></textarea></body>
So that the validate function is only run when the user leaves the text box. You could also run it onSubmit.
I also added a global switch (g) and optional trailing whitespace (\s?) to the regex:
replace(/\band\b\s?/ig,"AND \n")
This causes input like this:
sand and clay and water
to be transformed into this when you leave the text box:
sand AND
clay AND
water
You should probably test this against a bunch more cases.