I have many text boxes in a page and all are disabled on init.In Ipad only,(Safari and chrome)on page load the focus comes automatically on the fourth text box.
I removed that text box then focus comes on the 3rd one and so forth.
Since that textbox is disabled,you can see the textbox highlighted on init.When you click anywhere on the screen then a keyboard pops up for a half a second and then closes.
I dont want the focus to be on the textbox on init.It can be at the dropdown(optional) or no focus at all.
In ipad safari,textbox is highlighted and on clicking anywhere on screen keyboard opens.
In ipad chrome,there is focus and keyboard popup on init itself.
How can i prevent this.
use jquery/javascript
The opposite of focus is blur. You can just call this to remove focus from all inputs:
$("input").blur();
Or as you said, if you want to have focus on your select instead, just give the focus to this element. It should remove the focus from the input then.
// change the selector to your exact 'select' element
$("select").focus();
Related
So i have a text element on the canvas with fabricjs, when clicked on the text box some jquery fires and part of that code is supposed to push the cursor focus to a textarea while maintaining the active canvas object (the object stays selected just fine when i click into the textarea).
The problem is that the focus isn't being put to the textarea.
So if we have textarea with id "editing-box" and run something like this:
fabric.on('object:selected',function(e){
// set textbox to edit mode here
// focus on textbox
if(the object is textbox){
$('#editing-box').focus();
}
});
The fabric textbox goes into editing fine but the texarea doesn't take the focus for the typing.
I am using jQuery Token Input plugin with one of my custom written plugins in one of my projects.
My plugin basically adds an anchor tag to an element that it was initialized on and upon clicking the anchor link a text input element is shown which is bound to jquery token input plugin.
On FocusOut event i want to hide the text input (in this case which would be a ul initialized by jquery token input in place of the text input).
All works fine till now.
But if I press the alt key, the main ul is hidden as expected but the dropdown ul is still visible.
To see the problem that i am facing you can also view this JSFiddle. Sorry, about the CSS part, i did include the CSS file but for some reason it does not work as expected.
Now, in the fiddle if you click the + Add button the input and the dropdown (with instructions) appears, then if you click anywhere else in the preview window, it disappears, which is what is expected behaviour.
But if you click on the add button and once the input and dropdown appears and then if you press the alt key (which initiates the focusout event) the input disappears but the dropdown still shows. Why is that ?
What could be the reason causing this ?
Update:
I apologize if I made it a little complicated. Following is comparison between the expected behavior and the problem.
Case 1: (focusout event triggered by clicking somewhere in the body).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user focuses out by clicking somewhere else in the body > The Input and dropdown disappears.
This is the expected behaviour.
Case 2: (focusout event triggered on alt keypress).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user presses the alt key which triggers the focusout event > The Input disappears but dropdown does not.
I need to make sure the dropdown disappears in this case too.
Note: The Dropdown CSS is messed up in the fiddle for some reason. The text that says type somethig is the dropdown element.
Add shortcut library and add the following code . It works
shortcut.add("Alt", function() {
$('.token-input-dropdown').hide()
});
Demo :http://jsfiddle.net/abdennour/dHSWu/5/
Likewise,be kept away the tags using margin to avoid overlapping of events
a.addInput{
margin:2px;
}
div.token-input-dropdown{
margin:2px;
}
Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??
Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/
I'd like to have the keyboard close when a user clicks on the button.
Any thoughts super appreciated.
Thanks.
As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:
$('#otherBox').on('click', function(){
$('#orInput').focus().blur();
});
(This uses your jsFiddle HTML code).
There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.
You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.
<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />
For focussing/blurring you will then need to enable the field:
$('#otherBox').on('click', function(){
$('#orInput').removeAttr("disabled")
.focus().blur().attr("disabled", "disabled");
});
However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.
You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.
In a form I have a textbox which should have a currency value. I have a requirement to show the currency in the format 234,345,456 and if the user want to edit, then I need to show only the digits and not the coma inbetween the digits. So I written one function which will remove the coma and set its value with only digits. I am calling this function on onfocus event. Its perfectly working, but the only problem is when I traversed to that text box using tab key of the keyboard, then the blinking cursor doesn't appear, So the user is not understanding whether the focus is there in that text box or not. so how to show the blinking cursor onfocus.
If you are changing text it won't show the cursor, but you can change the background when textbox is focused through JavaScript like below:
box.style.backgroundColor = 'HighlightText';
Hi
Look into Dispatch Event on mdn.
I am trying to find a solution to a simple thing, that looks complex!
I have a textarea where users can update their status.
Underneath it I have a checkbox (ex: for the user to choose to tweet the status or no).
What I try to do is this:
1/ When the textera get the focus, the textarea expands, for that it's fine.
2/ When the textarea loose focus, so when the user clicks out of it, it collapse. That's fine too...
The only problem is that if the user click on the checkbox, the textarea collapse too but I want to prevent it.
It should collapse and execute the function on blur, but not if the user try to interact with the checkbox.
I set up an example on this page: http://favosaurus.com/dev/onblur.php
thanks for your suggestions.
You're going to need to use Javascript.
Pseudocode:
if input blur, and checkbox not clicked:
do normal blur action.
else:
process checkbox click
focus input again