HTML Button with functional nested input - javascript

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

Related

Focus should be lost when clicking on any other item

I am using angular-ng-autocomplete library at many places in my project.
But i faced 1 issue recently.
I have 1 button besides the autocomplete textbox. Whenever i select any option i am using it to add in the object.
But, Whenever i type something which is not in the dropdown list. At that time i can't click on the button until i click it twice.
So the 1st click is loosing focus from the autocomplete textbox and 2nd click is actually clicking on that button.
Demo
Try to type anything which is not in the loaded list. Ex: Test
Than try to click on 'Add' button, You will observe that you need to click twice.
For quick fix, I tried to read the mouseleave event on this ng-autocomplete, But it's also not being triggered whenever we are typing something. We need to loose the focus to make mouseleave works. And it's also not a good solution eitherway!
Any help?
Try this,
onFocused(e) {
// do something
this.auto.close();
}
Refer this for more https://github.com/gmerabishvili/angular-ng-autocomplete/issues/50

A programmaticaly created div in jquery needs an extra click before i can click its p element

I have an input field inside a div:
<div id="fields">
<input class="letters" type="text" name="lettersField" value="" />
</div>
and some jquery for it
$("#fields").on("change paste keyup focus", ".letters", function(){
// A new div is created with some p elements inside it like so
$("body").append('<div id="suggestions"></div>');
$("#suggestions").html("<p>words</p>");
});
Then finally i want to call a click event on those "p" elements like so:
$("body").on("click", "p", function(){
console.log("p element clicked");
});
The problem i am facing is that i need to click the "p" element TWICE for the FIRST time that the console.log appears, then when the input loses focus, i can click the "p" element and for each click have a console.log appear. Also, if i first click the input field, then click another input field or something else, and then go back to clicking the "p" element, it then logs the click on the first click (that's why i think that the input losing focus has something to do with the double click required).
I am not only interested in a specific solution to my problem, but also possibly a general understanding of what is happening here, if anyone could be bothered that would be awesome. Thanks in advance!!!
UPDATE FROM MY COMMENT
Hello again, i now noticed something, after running your codepen
again, give focus to the input field, then type "asd" on it, and THEN
try to click on the "p" element, that should reproduce the problem.
ANOTHER UPDATE FROM MY COMMENT
Hello once again, i managed to solve my problem by removing the
"change" event and leaving the rest events in tact (i had originally
also added a flag variable to create the window only once). Thanks
again for the help, if someone knows any more information on why the
"change" event would do that i would welcome it.

Edit a editable label on button click

I'm using x-editable to inline edit some text. As long as I click on the label directly everything works fine. But, if I implement a button and want label to be edited on button click, then it won't work.
The reason being, clicking the label edits it and clicking anywhere outside label resets it. Here, when I click the button, its considered as a click outside and editable-label doesn't edit.
What to do? I don't want to go with setTimeout().
The following lines did the trick
I gave the Button a ID ("inline_editable_button")
jQuery("inline_editable_button").click(function(e){
e.stopPropagation();
jQuery('#editable_id').editable('toggle');
});

Closing keyboard on iPad in div contenteditable

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.

jQuery Javascript how to keep click event from going null

Here is a JSfiddle link to the script I am working with:
http://jsfiddle.net/TSM_mac/bnjWQ/
To use it, you first click the button and then on the element you want to modify.
As you notice, when you click the button to apply it to the div, the property is disabled and you can't just click on other objects. I want to be able to click the button, and apply it to any object without having to reclick the button.
The original code I wrote was not as tidy as this code, but a very helpful person wrote this for me to fix a problem I was having... I can't seem to enable this feature.
Just delete or comment out the line setting currentInput to null in the div.editable click handler and the if statement in the css property input click handlers. http://jsfiddle.net/bnjWQ/2/

Categories

Resources