I am building a autocomplete feature for input text field. Currently I could use mouse click to choose the selection, I'd like to add keyboard control to allow autocomplete control. I monitored the keycode in onkeyup event, it appears for up/down key, the key codes are both 0.
I am wondering whether there is any better way to do so.
Thanks.
Keycodes 37 - 40 should do it for you. They map as 37=left, 38=up, 39=right, 40=down.
Look at the example at http://www.w3schools.com/jsref/jsref_onkeydown.asp. It works for me in both FF3.5 and IE8.
There's usually not a justifiable reason to re-invent the wheel. That said, I would recommend using jQuery with the AutoComplete plugin.
Related
I haven't tested this yet on Android, but on iOS, I know for sure it's not working.
I have an input field where people can write stuff. I want to deselect (remove the focus) the input field when someone taps on "enter" on the native iOS keyboard... yet it does not work. It just keeps it's focus on the input field, while I want to get rid of the focus on the input field.
I am using Angular / HTML / Ionic / pure JavaScript. I have a lot of input fields, so am using classnames. Is there a way to achieve this?
You can see the input fields here and the keyboard beneath.
You can just listen to the keydown event of the input box and check whether the event's keyCode is 13 (key code of enter).
When this happens you can just call the blur() method of the input element.
It would look like this.
I used AspTokenInput Which is used as AutoComplete TextBox to create Tags .
I use this Link To know How to Use it.
It's Works Fine For Me and give Result As I want.
Now I want to Make This Control Enabled or Disabled On a Button Click according To Condition.
I Use this on Button Click
AspTokenInput.Enabled = "False"
But it's not Working...
Your problem is that the jQuery Tokeninput field cannot be disabled serverside.
See (http://loopj.com/jquery-tokeninput/) for documentation on this library if you want to try and finagle the js on and off. At a glance, I don't see an enable/disable flag or method. You may need to dig into the ASPTokenInput library to see how it pulls its data source, and then enable/disable the plugin with:
$("#my-text-input").tokenInput("clear"); //disable
$("#my-text-input").tokenInput("/url/to/ASPTokenInput/Datasource/");//reenable
The problem with this approach is that it basically goes around the ASPTokenInput layer, which kind of defeats the point.
My secondary approach was to try a hack, but hiding the dropdown isn't the greatest solution (or even easy in this case), nor is having the check box swap the autocomplete input for another. Swapping text boxes is probably the simplest solution.
For iOS, instead of showing the keyboard any time you click inside a textbox, can I create a button to toggle the keyboard on and off so users can have control over when to display the keyboard? What's the javascript function for it?
PLease note I want to do it in javascript not objective-C.
Thanks,
I'm fairly certain there isn't a dedicated JavaScript method for controlling the keyboard, but you might be able to fake it with jQuery. Assuming you have a text input like this:
<input type="text" name="formula"/>
Your JavaScript code would look something like:
$(function(){
$("#formula").focus(function(){
$(this).blur();
/*
Put code here to bring up your custom keyboard. Update
the value of #forumla as symbols are pressed.
*/
});
});
If you want to add a button to your custom keyboard that brings up the traditional keyboard you would want it to execute:
$("#formula").focus();
Lastly, if you only want the keyboard that pops up to default to the numbers keyboard, which sounds like it could be a nice added touch for you, you can tell iOS the element is for numbers number by changing your element to look like this:
<input type="number" id="formula"/>
You should be able to accomplish what you're trying to do with these tips.
#George: I finally decided that I don't need the regular textbox because I have a customized keyboard anyway. That way I won't have to worry about the keyboard popping up when touching my 'customized' textfield.
Anyway, thanks for your effort.
I am using Firefox to do this but it works in IE6 ... go figure.
Basically I have code written to traverse a grid of input elements using arrow keys. All of that is working just fine. I can move freely to any field using the arrow keys. When I use up or down arrows the select function seems to work correctly by selecting all text in the next field. (desired result)
document.getElementById(id).select();
However when I traverse left or right the text seems to be using a default browser function to move the cursor once to the left or right after the select happens forcing the user to select all the text again (undesired result).
Is there a way to disable that in firefox so my text gets selected correctly? The typical workflow for my users is to just hit the arrow key then start typing numbers ...then repeat.
I'd say this behavior is caused by the keyup event. Did you try to stop it?
edit: yep, works fine when keyup event is cancelled : http://jsfiddle.net/D6ANY/1/
From your description, it seems to me that you are trying to achieve a "spreadsheet" like effect. If thats the case, then the behaviour you are implementing could confuse users. e.g. in spread sheets the selection moves with arrow keys for each cell but if you have to edit a cell, you need to hit the enter key. That makes it editable and then hitting the enter key again will make it read-only
I'm doing my own Ajax thing with dropdowns. I've positioned an input over a select tag. When stuff is typed into input it collects from the database and populates the select menu. Problem is its not noticeable. Is there a way to make the select menu open as if a user has clicked on it?
Nope, you're going to have to use something like a DIV with overflow: auto to emulate the behavior of an opened select.
The HTML5 <datalist> element would help out here, but since there are only a few browsers that support it at the moment, you will have to rely on a JS implementation.
The following was the least buggy implementation I could find from a simple Google search
http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml. It supports Ajax as well as up/down arrow keys.
StackOverflow also uses it's own implementation of auto-complete when you start typing tags, maybe you can get some ideas from looking at the source code?