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.
Related
I have a text input field on a website that people have found confusing. To use it you have to hit the enter key on your keyboard, but since the mobile keyboard shows a return button people think it means new line and not submit.
I noticed that flutter has textInputAction property that can be changed, I was hoping that there may be something similar in html, css, or js that has similar fine grained control.
The only thing I have found is that type="search" guarantees a button that won't be return. This is a possible solution as the button I see for search fields is a generic checkmark, but I'd like to avoid mislabeling my input type. As well I'd like to avoid a magnifying glass icon which I believe has been and may still be used for some devices.
Why does this work on every other device and every browser unless that browser is on an iphone (iphone 4 in this case)?
<script type="text/javascript" lang="javascript">
function FocusTextBox()
{
var text = document.getElementById("textBox_Search");
text.select();
text.focus();
}
</script>
Also tried jquery:
$("#<%=textBox_Search%>").click(function () { ("#<%=textBox_Search%>").Select() });
I'm looking for this behavior after postback/end of button click event. Example screenshot:
FYI: The reason this behavior is required: The mobile devices have wireless bar-code scanners. Need the ability to scan items over and over again without touching the screen. Manually clearing out the previous item in the UPC box isn't going to work. Needs to do it automatically. It should just select what was previously entered so that it will be erased with the next item scanned. The scanner simply performs a keyboard enter function with each scan. This works well and the button is clicked because it's the default button on the page. But, the problem is that on an iphone, the text is not selected again as in the picture above.
I've also tried just doing a .select() from codebehind after the button click. I've tried registering the javascript and executing it last in the button click event. All of those things work on every device except an iphone.
Thinking of forcing my employees to buy Androids. lol
This simply won't work on a iphone. Reference this answer:
How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?
This is typical Apple thinking: Sacrifice usability for user friendliness. Not surprised this was the ultimate answer. If anyone ever finds a work around, please let me know!
If you are like me and want more confirmation that this is indeed the unfortunate answer: https://discussions.apple.com/thread/5187540
For highlight your text on recent navigators (http://kimblim.dk/css-tests/selectors/) like the iPhone, you should use the css3 pseudo classes :focus, ::selection and :hover and apply to them a specific style.
For example, if I want to highlight <p id="textBox_Search">Text</p> in yellow on select, the css will be :
#textBox_Search::selection { background-color: yellow; }
More informations here about css3 pseudo classes : http://www.w3schools.com/css/css_pseudo_classes.asp
You can also do it with jQuery, like following :
$(function(){
$('#textBox_Search:selected').css('background-color', 'yellow');
});
Details of the .css() function in jQuery : http://api.jquery.com/css/
NB: JQuery is the best way cause it works on every navigators instead of raw javascript and css, who are a bit hard to compatibly between navigators. A good way to learn how to use this framework : http://learn.jquery.com/
This is a 2 part question:
1)
click on one of the demo dropdowns on this page. when you tab over to the next input, the text is selected/highlighted in firefox. how can i prevent this from happening?
2) bonus: can you review my code that is hosted on google and tell me what i can improve?
Well, that is just default behavior on Firefox. A possible workaround is to have the input fields execute a JavaScript or jQuery function on select, have the function blur the field (which would deselect the text) and then refocus on the field. Very basic and I'm sure it'd need a couple extra hacks. Unfortunately without scripting, no there is nothing you can do to prevent that.
I honestly recommend that you leave it alone. That functionality was put in place so you wouldn't have to use your mouse when typing into forms, hitting tab would select all the text so you can easily retype it or hit the right arrow key to go to the end of the field. Removing the functionality will only irritate some of your visitors. If they're using the tab key to get to the next field, they probably want that functionality.
I have a site built using JQTouch and want to add the little cross
buttons within text input fields to clear out text on press.
I've tried emulating Google's technique from their google.com iPhone
site. Also I've read about that approach over here
little 'x' in textfield input on the iphone in mobileSafari?...
I have this partially working. But whether and when a press on the
cross button is registered seems unreliable.
I've created minimal code to test this:
with JQTouch -
http://hogtownconsulting.com/clearquery/index.html
without JQTouch (or any other JS libraries) -
http://hogtownconsulting.com/clearquery/index-no-js.html
I'm not certain that it's an interaction with the JQTouch library
that's causing these problems. But the version without JQTouch does seem more responsive to taps on the cross button. Any suggestions on how I can get this feature working
properly would be much appreciated. Thank you, Patrick
You get that little X automatically if you name your input type = search.
<input type=search name=s>
This article will help you plenty.
CSS Tricks for WebKit
If you don't want that input to be a type = search, then you will have to fake it out a bit.
1. create a div and round it using css.
2. put your input in there, and remove webkit decoration, shading etc.
3. put a SPAN with your X image in to the right of the input. add an onclick to that image which clears your field.
<div><input type="text" id="thing"/><span onclick="clrField();"><img src="x.gif"/></span></div>
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.