Please advice how to keep focus on textarea element after clicking specific button. For my mobile app I use Quasar vue based framework.
Tried to apply preventDefault
<q-btn #click.prevent="handleClick" label="click me" />
and stopPropagation
<q-btn #click.stop="handleClick" label="click me" />
But in any case textarea losses the focus after button click.
Codepen: https://codepen.io/olegef/pen/NWNvxJM
UPD:
workaround with forced focus causes side effects on mobile like blinking embedded keyboard. That is why I'm looking for option with permanent focus.
UPD2:
it works just fine if I use simple div as a button and mousedown event instead of click
As Mr. Polywhirl mentioned in the comments, that's because after click, the button has the focus. One way to return the focus to the input is like this:
Add ref attribute to your input:
ref="myInput"
So your input becomes:
<q-input
ref="myInput"
v-model="text"
filled
type="textarea"
>
</q-input>
Then in the handleClick method add this line:
this.$refs.myInput.focus();
The question author left the update "it works just fine if I use simple div as a button and mousedown event instead of click". In fact, the desired effect can be achieved using a button element. Here the mousedown event is prevented, to stop focus being lost from the text area, while the click handler is invoked as normal:
<q-btn #mousedown.prevent #click="handleClick" label="click me"></q-btn>
This can be seen in this forked codepen. (The second button has the above fix.)
Related
I am having a div which contains an input element and span element as children. The input and span are siblings(having common parent div). So i am having a blur event on div and i am having tabindex 0 on span element. So when my focus is on input element and when i tab the focus shifts to span but the blur event is fired.
Is this event firing expected when tabbing between sliblings?
React Code:
<div className="box-v2"
tabIndex={-1}
onBlur={this._onBlur}>
<input ref="inputBox"
className="input-box"
spellCheck={false}
value={this.state.text}
onChange={this._onChange} />
<span className="icon"
tabIndex={0}/>
</div>
In the world of React JS, we can assume that it indeed is expected. If it makes sense, is another story.
Reason:
Native focus and native blur events don't bubble. Corresponding React event handlers onFocus and onBlur do bubble - dun dun dun.
(Source: https://github.com/facebook/react/issues/6410#issuecomment-207064994)
I created a WebpackBin where you can test and compare the behaviour:
https://www.webpackbin.com/bins/-KoJBHpK9s_OA76FnLkv
Open your browser's dev console, webpackbin cannot show the console.log of the iframe, I wanted to show both examples "side by side".
As you can see, the React behaviour is the one you described. You focus the input field and if you tab to the sibling span, it will fire the onBlur event.
But in the native code, this is not what happens. If you focus the input there and then tab, nothing happens (except moving the focus to the sibling span, of course.
If you focus the div and then leave the focus again, then it will fire the onBlur event too.
I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.
Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin
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.
I have a <button> element which adds an element to my page when clicked.
What I'd like to do is to have an <input> inside this button, in which I could input a number, and then on button click, it would add x times the element instead of clicking x times on the <button>
See demo here : http://jsfiddle.net/MWxgb/5
The problem is that I can't click inside the <input> element inside the button, it clicks the button instead.
Is there a way to avoid this behavior ?
Just prevent the clicks on the <input> from bubbling:
$("#count")
.click(function(e) {
e.stopPropagation();
});
http://jsfiddle.net/qT7gC/
http://jsfiddle.net/3vtTv/2/
I changed the button to a div, but still use $("#btn").button() to style it.
Then I call stopPropagation on the click event for the #count click handler.
This seems to work (in IE9, Chrome 10, FF4), but unfortunately the button still flashes when you click the textbox. Not sure how to work around that.
Odd idea, I doubt that would work. I would recommend just using a text input, and setting up some javascript to read a click/enter key pressed.
Refer to this question
Here is an example
I have a text type input field and a checkbox.
If I change the text and then click outside the input box (or press enter or tab) the change event is thrown. But if I enter some text and then click directly on the checkbox using the mouse, only the checkbox change event seems to be thrown.
I have the following code:
<input type="text" name="text" class="update">
<input type="checkbox" name="check" class="update">
and this jQuery:
$('.update').change(function(){
console.log($(this));
});
Is this a known problem, and how can I make sure all change events are fired/thrown/caught in this setup?
To fire user changes, use the input event:
$('input').on('input',function(){...})
To fire code changes, use the DOMSubtreeModified event:
$('input').bind('DOMSubtreeModified',function(){...})
If you want to fire both user and code changes:
$('input').bind('input DOMSubtreeModified',function(){...})
The DOMSubtreeModified event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...
I'm not sure if I get it. But for me when I try to type in textfield and then click checkbox by mouse both events are fired. But you have to keep in mind that event 'change' for text input means that this input has to loose focus, as long as field is focused no change event ever will be triggered. This somehow might be your case. Checkboxes/radioboxes work different way tho. No need to loose focus.
Cheers.
P.S.
My test case:
http://dl.dropbox.com/u/196245/index16.html
The change event fires for both because you're listening to the update class.
The change event will not fire unless the input focus switched to other controls