Having both value and placeholder possible in form input? - javascript

I'm looking to have both value and placeholder at an input field... the value would be more like twitter's #mention... it's the text the user need to have to start the input, and the placeholder gives hint to what user needs to type.
It seems like this can't be accomplished with only html
But is there anyway to make this possible in javascript or other means?

Use either two input fields (one with value and one with hint) or just use a label to tell the user the string always starts with #mention (or something else).
In the code to handle the input you then append both strings.

Related

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?

Validating input in nAngular form using custom function

I know I can make Angular validate inputs against regex, so I can allow/deny certain values. But is there a way to validate an input value against a custom function?
For example, say that the input value is pushed in an array and I want to check if the value of the input is already in the array.
Also, I want to be able to mark the input as invalid or required, the same way Angular would do it if I was using plain regex.

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.

Find default value of field after page refresh

I'm looking for a way, with jQuery, to get the default value of an input field (in an HTML field).
Seems simple enough. Just calling $("#id-of-field").attr('value') should return the value I'm wanting right?
Thing is, if the value is Foo, when I load the page, it returns Foo. No problem there. But if I write Bar in the field, then reload (not submit) the page, $("#id-of-field").attr('value') will return me Bar, even if in the source code, the value attribute of the field is still Foo.
That makes validation of my form sticky, because when I get my default values to ignore them if the field has not been filled, I could get a real value in the mix of "Values to be ignored".
FYI, I can't put in the values manually, since the form is dynamic, and cannot query directly the database because it's a Wordpress Website.
Input fields have the defaultValue DOM property that does exactly what you need.
According to this answer, the jQuery (> 1.6.3) way to access it is
$('#element').prop('defaultValue')
Alternatively, in pure JavaScript, e.g. -
document.getElementById("element").defaultValue
Try this
$('inputSelector').prop('defaultValue');
You could try -
$("#id-of-field")[0].defaultValue
That should get the DOM defaultValue property which should give you the original value of the textbox
https://developer.mozilla.org/en/XUL/textbox#p-defaultValue

Categories