I'm wanting to write a a block style input text box. I realized I might not be describing it correctly and if someone could give me the proper name, I would appreciate it. Basically I want the functionality of how GMail uses their email address client:
I don't need the autocorrect functionality, just the part where a user presses the enter key and it places it in a single entity/block and you can continue to type.
I'm sure there are libraries out there but I've had trouble finding them since I don't know what the technical name for them are. Any examples would be appreciated!
Related
I am trying to build an input component in React wherein user can enter his/her email. However, only emails with #ampf.com should be accepted.
I need to show the text #ampf.com in grayish color as soon as user types in # symbol in the input box. The content entered by the user should however always remain in black color. Only the prediction for '#ampf.com' should display in gray. So, if user keys in 'his_email#a', then only 'mpf.com' should remain in gray color. Likewise, if user keys in 'his_email#am' then only 'pf.com' should remain in gray. And if user keys in 'his_email#something_other_than_ampf.com' then all the predicted grayish text should be removed.
I need to implement this using javascript and css only.
Any help would be highly appreciated.
Some examples of the expected behavior:
AnilYadav#ampf.com
AnilYadav#ampf.com
AnilYadav#ampf.com
AnilYadav#ampf.com
AnilYadav#ab''
Somehow these examples are not showing the difference between black and grayish part of the email.
The simplest way would literally be an input field for the username and then just show a text label inline with the #ampf.com
Then when submitted, simply make up the full email address by combining the username and the static domain string.
<input placeholder=“username” />#ampf.com
I'm pretty sure there are plenty approaches. I just created an example that might help you find your way around.
Feel free to modify and improve it, as it's definitely not perfect.
I'm looking for a solution where I could have an input box that has a value in, and that value cannot be changed, although if a user goes to enter information into that box, they can add say their name along side the value, but the value cannot be deleted.
Here's an example:
First Name:
If a user clicks on that box they can then enter their first name.
First Name: Kate
'First Name' cannot be deleted though and if possible not as a value.
I think this is possible but I can imagine it's a very tricky to do. I saw it on a website once but I can't remember where.
Even if there were possible, and I'm sure it is, you should not do it.
Whenever you manipulate a control so that is serves a purpose other than the purpose that it was designed to serve, it becomes a usability issue. Simply put, you are going to confuse your users.
Use a <label>, or rethink your interface design completely.
You probably can use a mask control or at least same principles. The advantage of this approach is that it covers your needs regarding using a text input and it won't confuse users usability thanks to the _ on the controls which will let users know clearly what can be removed and what cannot.
Here is an example with jQuery-Mask-Plugin
Online Demo
Your html
<input id="txt1" type="text" value="" tabindex="1" />
Your script
jQuery(function($) {
$('#txt1').mask('Something:a*****');
$('#txt1').val('Something:');
});
Disclaimer: Even though I used jQuery Mask plugin I am no saying it will be the right choice for your application or the only choice but I think it can guide or give you ideas on how your problem can be resolved.
Hope it helps!
http://jsfiddle.net/5QWqH/
Create a background image which contains the text "First name" and apply it to the text box. Add some padding-left to the box as well.
Note that you should also use a regular label tag for accessibility reasons, but you can hide that using CSS.
In gmail when we input an email and press the pace bar, the email form a light blue box, and then I can type in another email so that they are separated. (Similar for tags in Stackoverflow?) How can one actually achieve it? I have looked into Tagit, but it's no longer under active development. They suggested Select2 as the alternative, but I don't see how can I achieve the desired effect with no predetermined list of accepted values (All emails should be accepted!).
Any idea how to make it? It is best not to use jQuery UI for this :).
Check out Auto Tokenization for Select2. It allows users to insert non predefined tags (or email adresses in your case). Make sure you define tokenSeparators, for example:
$("#input").select2({
tokenSeparators: [",", " "]}
);
I signed up for a free account at 96Down.com using Chrome, which auto-filled some of the fields for me (last name and email address).
When I submitted the form, those fields were highlighted asking me to make sure I fill out those fields. Were they somehow able to detect that I didn't manually fill in these fields?
I must admit I haven't had time to look at their code, I was just wondering if anyone already knows of this.
They could keep a boolean for each field and set it to true if the field got focus. That way they'd know if autocomplete was used (if any of those booleans are still false, autocomplete must have been used).
There may be other techniques - why don't you look at the source of 96Down.com and enlighten us?
96down.com uses the amember script, if you need more info on it just visit http://www.amember.com/
Aled
I need functionality in my web application similar to Gmail's drop-down of suggestions when entering recipient addresses, or Stack Overflow's drop-down when entering tags for in question composition.
In Gmail, there is a text field for the "To:" address. Once you start typing, a drop-down appears with suggestions. If you enter a semi-colon or comma, you can enter another address. Again, once you start typing this address, a drop-down appears with suggestions.
The suggestions are the subset of your address book containing the text you've entered. (E.g. if you typed "jo" then "John" and "Foojoe" would appear as suggestions, but "XYZ" would not.) The matched part of the word is highlighted in bold.
If you press "enter" or use the up and down cursor keys, you can navigate around the drop-down suggestion list.
I could presumably program this myself, however I have the feeling there must be standard solutions out there I could incorporate. However, all I found were solutions where the value of the field led to the suggestions, and not the value of the current part of the field led to the suggestions (where each part was separated by a separator, for example "," or ";" in the case of Gmail, or space in the case of Stack Overflow tags).
I am using Wicket (Java server-side Web framework) so any Wicket-specific solution would be great, but otherwise I'm sure I can incorporate any plain Javascript library in the project.
jQueryUI's autocomplete is a great plugin.
http://jqueryui.com/demos/autocomplete/#multiple
The link is to the "multiple values" example which is almost word for word what you described; it matches partial words from the middle, it allows key-based navigation, multiple entries.
You can use the AutoCompleteTextField class in wicket-extensions for this.
Wicket Examples provides a sample implementation as the first item in its AJAX section. The source code link is kind of hard to see, it's at the right edge of the gray bar.
(The description even says "like google suggest!")
There are some JQuery plugins for that out there, for example:
FCBKcomplete
Tokenizing Autocomplete Text Entry
There is a AutoComplete Component in the Wicketstuff project. There is an Blog on how to use it.