We Keep Coding

Is there a way to distinguish selecting from a datalist vs typing the same string manually?

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.

getting empty field value with JavaScript in FormAssembly calculated field

I'm pretty inexperienced with JavaScript, but I'm trying to do something that seems like it should be simple. I have a text input field (FieldA) in a FormAssembly form. I have another text input field that’s a calculated field (FieldB), and I want FieldB to return one value if FieldA is empty and a different value if FieldA is not empty. The formula I’m using in “Enter the calculation” looks like this:
if(FieldA==""){"empty"}else{"not empty");
When I go to the form, the result is “error” in FieldB, and adding a value to FieldA has no effect. When I do it in Preview mode, I get the additional message “There was an error computing this field.” FieldA here is tfa_40, but it seems to make no difference whether I use tfa_40 or define it as a variable and use the variable name. It also doesn’t seem to matter whether I use double quotes, null, or 0. Am I taking the wrong approach here? Is this even possible?

MVVM binding with Vue.js does not work as expected

I'm currently making a dynamic-sized editable list component in a form.
I have at least one input field shown which is responsible for the creation of new fields as you type. If you type anything else than a whitespace character, the value of this field is added to the model and then reseted.
On the next tick, Vue updates the view and create the new input field with the letter you typed in, and I give the focus to this field so the user can continue typing as-if nothing happened for him.
So when the field is created, the model gets a new item which has the letter you typed in as its value. The problem is that when you edit the created field, the model isn't updated.
I made a JSFiddle so you can check it by yourself
itemBlured: function (idx) {
console.log(vm.songs[idx].name); // Always print the same letter for a given field
}
The final goal of the itemBlured method is to remove the last edited entry in the model if its value is empty. But for now you can see, by opening your dev console that even if you change the value of a field, the Vue model isn't updated.
Any help or idea is welcome :)

I found the reason why the binding did not occured.
When dealing with <input> tags, you must use the v-model attribute instead of value to tell Vue.js to bind the input to your model, otherwise it just act as mustache template.
Hope it helps someone one day.

jQuery function to control what user types in a textfield

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.

Format input data using YUI 3

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.