Is there a way to apply a mask in a input using yui3 ?
Is it possible to have a field where the user can only enter a phone number?
And if so, how?
Thx a lot
I would say that your best bet is to have an onChange or onKeyup (or even onValuechange - a YUI construct) handler listening on that input. Whenever it detected a change, you would run a formatting function on the current value of the input, which formatted it in the way you wanted.
if you want to be light-handed about it, just put the dashes in where they go, for example :
"1105551212" --> "110-555-1212"
if you want to be heavy-handed about it, the event handler could literally strip out any non-numeric, or non-dash characters, which effectively prevents the user from entering bad input, though they could of course put in a non-existent phone number.
one step further: do both. strip out invalid characters, and do auto-formatting.
Related
As far as I can tell there isn't, but I figured I'd ask.
I have a text input. Autocomplete suggestions are fetched dynamically as you type and fill a datalist attached to the input. Normally, typing something and pressing the "search" button brings up a table of search results to select from.
Since the datalist is basically the exact same thing, but simplified, and selecting an option from it is unambiguous, I'd like it to just carry on with my selection handlers without having to bring up the list for selection a second time. When the person manually types something though, I still want them to explicitly pick from the list, especially since some options may be substrings of the others, so I don't want it to auto-select a result for you if it matches halfway through.
I ended up not reimplementing it like ControlAltDel suggested in his comment and instead went with the following slightly hacky but functional solution:
Since I am refetching the search results as you type, if only 1 search result is returned (ie. it's unambiguous) and the current string is a case-insensitive exact match to that result, then select it. It works well for what I need it for, but I could imagine this not working for everyone.
The JS is roughly as follows:
if (searchResults.length === 1
&& searchString.toLowerCase() === searchResults[0].toLowerCase()
) {
selectResult(searchResults[0]);
}
I'm calling this in my handler for when the search results list changes, not the input's handler, since the results are only re-fetched after the input has already been changed.
I have a barcode gun scanner reading, barcodes, of course, into input fields. At the moment, I am able to read the barcode but it is returning every digit separately. I need it as a whole string. I have been breaking my skull about this.
For example, I read a bottle of water's barcode, the input field catches the number correctly (i.e. 688267022760). When I console log it, I get independent instances for each digit.
My template (VueJS) triggers the scanner event on input. Which I am not entirely sure if that is the correct event. I tried keydown and keyup as well. Not exactly sure which is the recommended event listener for a scan gun. Anyway this is what I have in my template:
<input id="packageInput" type="text" #input="onBarcodeScanned" />
And in my script:
onBarcodeScanned(barcode) {
let numbers = barcode.data; //data is the object property I need
console.log(numbers); //this shows me values I need
let newarr = []; //creating an emprty array where I assume I need to push data to
// looping through the data and pushing it to the new array, which does not do what I want but it was my logic
for (var i = 0; i < numbers; i++) {
newarr.push(numbers);
}
},
The desired effect would be to get those independent values in an array and then joined as a string.
P.S.
Reading the barcode property returns a series of objects with lots of handlers for several functions. The property of interest is data. See below an example of the barcode objects
How can I do this? I'm stumped
P.P.S
I understand the scanner itself comes with a series of instructions to program it. Some of which I don't understand too well. Perhaps there is a type of barcode that returns as a string instead of each digit as an object? The scanner I am using is a Wasp CCDScanner WCS3900
onInput runs every time the value changes. Most barcode scanners will simulate keypresses to enter the values they scan, so as far as your app is aware, each digit is a keypress that's changing the value and so it reports each as an input event. An input event's data property is just the part of the input that's changed -- so you're getting one at a time.
You need a way to determine when the input is finished, not whenever it happens. I believe most barcode scanners will simulate pressing ENTER or TAB after a full scan is complete, so that might be what you want to detect, not with an input event, but with a keypress or keyup event.
I've been dissatisfied with the way Dijit's FilteringSelect widget works for some time and have been tinkering using the Dojo 1.10 trying to improve it for my use case. Unfortunately it seems no combination of settings is quite right, largely because they don't work together.
Setting queryExpr: '*${0}*' is nice, but it make auto-complete go loony.
Setting autoComplete: true is nice as long as you want to type the whole text starting from the beginning until you find your match. Unfortunately if you want to start in the middle somewhere it becomes a pain in the butt. Sure you can set searchDelay: N to to something large enough to catch all your typing, but as soon as you let it return incremental results in the menu, BAM your ability to keep typing and maybe end up with a match somewhere else in the word goes out the window.
What I really want is something that completes much like a fuzzy-finder does in a shell or decent text editor (e.g. fzf). Such finders skip over intermediate characters, basically splitting your input by character and adding implicit wild-cards between them. You keep typing until the first match is the one you want, then end the finder and let it replace the value.
I started messing with a way to implement this, but didn't get very far. I thought about hijacking _patternToRegExp(), but quickly discovered that my store (an instance of dojo/data/ItemFileReadStore with some JSON data) sets the _oldAPI flag and that never gets executed. I'm happy to update stores, but it isn't readily apparent to me that will make this easier. Hacking on my store, things spiraled out of control and I decided to take a less involved but more hackish approach.
If you turn off auto complete and set the options to do matching in the middle of words, you get a results list pretty close to what is needed. All that remains for the user to do is hit Down once after they type in enough input to get a match and before they Tab away. The question then becomes how to avoid requiring this manual intervention and become more forgiving.
define(["dijit/form/FilteringSelect"], function(FilteringSelect){
return declare("alerque.FuzzyFilter", [FilteringSelect], {
autoComplete: false,
highlightMatch: 'all',
ignoreCase: true,
queryExpr: '*${0}*',
searchDelay: 0,
_patternToRegExp: function(qs) {
// If this ever actually got called, maybe we could
// return qs split with wild cards between all characters
return this.inherited(arguments);
},
onblur: function() {
this._autoCompleteText(this.get('displayedValue'));
// Pick first match from menu
return this.inherited(arguments);
}
})});
Hijacking the onblur() function seems to be the right place to make a widget that defaults to the first match if you tab or click away, but I can't figure out how to actually use the first match from the menu.
How should I proceed to get more robust fuzzy searching with auto-completion of the best match? I don't want a ComboBox, the value has to end up being one of the values in my JSON data set. At the same time I want input options to be much sloppier than typing the value from the beginning or having to manually select a match.
maybe a workaround/solution for your onBlur :
set the queryExpr="\${0}"
no delay and autocomplete off
On onkeyup of the filteringSelect you store the first value from the popup matches somewhere, then after onblur change the displayedValue/value of your filteringselect to the value from the first popup (if it was found & matches...)
To get the first value from the popup:
The first shown value can be found in a element with id = YOUR_FILTERING_SELECT_ID + "_popup0"
so if your id = "mySearchData" then look for id "mySearchData_popup0"
if that element exists then store the innerHTML somewhere (hidden element or var ...)
Adjust value from innerHTML to match value from store:
From the value you get from the innerHTML, remove the span elements from it so it matches one of the values of your datastore
if your id from your filteringselect = "mySearchField" and if you are searching "123" and the first match in popup shows "test 123 number"
then the innerHTML value from the first popup will look like this
<li id="mySearchField_popup0" class="dijitReset dijitMenuItem" role="option">
test
<span class="dijitComboBoxHighlightMatch">123</span>
number
</li>
So, little bit of String doodling (just remove the span tags out of the innerHTML value) and you will have a value that matches your first result after onblur.
My initial idea was something like that:
$(document).on("element","event", function(e){
});
But I have some doubts about this function:
which value I should use for "element"? I could use something like this: 'input[type=text]' or I should use a class for the element (like class="validate") and use ".validate" for instance)
which value I should use for "event"? I could use onfocus from element input, or do jQuery have a particular nomenclature for this type of event?
for each key presses (which seems I should use var key = which to capture), how I could check if it's a number or a letter?
using the regex string, how I could get the type of the character in a specific position? for instance, with the regex: [0-9]{2}/[A-Z]{2}/[0-9]{4}, the position 2 should return 'number' as type, the position 3 should return letter, and the position 2 should return 'symbol'.
Anyone can give me some help here?
UPDATE
Let me try be more clear about my question:
I initially think about create this jquery function in my project:
$(document).on("element","event", function(e){
//
});
But I have no idea how "event" I should listener here (I could use the same events available for the input atribute from html?) and like to know what name use for element (I ever use the ID or class from element, and jquery examples always use on of them, but how I could use the own element name, like input - I see once this being used: input[name=something], can I use this too: input[type=text]?).
In relation to the content of the function, I imagine this pseudo-code:
1- tam = size of string (calculated based on regex - already have a function to d this).
2- model[] = array of characteres with 'tam' elements (ok to me, too).
3- initialize counter=0.
4- for each key pressed by user:
4.1- type = store the type of the character in the position 'counter' of 'model[]' - I think I can use the regex to do this, but I don't know how.
4.2- if the character has same type from 'type' variable, store it in model[counter] and increment counter.
So, basicly, my question is find a way of, given a regex, find what type of character should be in each position (I explain that with example in the item 4 above).
There are many ways in which you can restrict/validate what your users type in the input fields.
Method 1
You can use input masking, a great way to improve data validation in forms. Masking allows you to only accept data in a certain format, type. Have a look at this - https://github.com/RobinHerbots/jquery.inputmask
Masking Demo - http://robinherbots.github.io/jquery.inputmask/
This also accepts regex as you need, can be implemented using the library something like this -
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
REGEX WORKING DEMO - http://codepen.io/nitishdhar/pen/Clzem
Note - This method actually restricts the user from typing or entering anything that does not comply to your given pattern in the mask.
Method 2
You can use different input types to control the input eg. text, email, password, number etc.
Ref - https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
Note - This method just defines the type of input control that will be rendered, whether password type or a number type. Helps browsers accept data in those formats.
Hey I'm trying to create an input field in javascript with a Rails back-end.
I would like to make the input field take only currency amounts. so
$1.00
$100.24
How could i pull this off. Currently a person can put in multiple decimal points and so on.
Hopefully this question is not too vague.
Bind this function to the onchange event of your text field. This will parse the value of the field as a float and remove any number after 2 decimals.
You can also use input type="number" to prevent strings as input.
Needless to say, this will require server-side validation. The user can disable Javascript and input type fairly easily: never expect this to work if these data will get back to your server.
function check(e){
e.value = parseFloat(e.value).toFixed(2)
}
working jsfiddle: here.
input: 123456 - result: 123.456
input: 12,3456 - result: 12,34