HTML Button with functional nested input

Question

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 ?

That's certainly interesting. FWIW, the input element doesn't render at all in IE9. — Sapph, Mar 29 '11 at 07:24
That's weird, it renders correctly on IE7 (all squared, but it renders) — Sylvain, Mar 29 '11 at 07:31
Thrd: Switching to IE7 or IE8 mode causes the input to show up. I suspect nesting an input field inside a button might be non-standard, but that'd require looking at the spec. :) — Sapph, Mar 29 '11 at 07:32
Thrd: Yup, looks like it's illegal HTML to have interactive content descended from a `button`. Consider using a `div` or some other method to accomplish your goal. - http://www.w3.org/TR/html5/the-button-element.html#the-button-element — Sapph, Mar 29 '11 at 07:35

score 2 · Answer 1 · answered Mar 29 '11 at 07:26

2

Just prevent the clicks on the <input> from bubbling:

$("#count")
    .click(function(e) {
        e.stopPropagation();
    });

http://jsfiddle.net/qT7gC/

answered Mar 29 '11 at 07:26

Alex Gyoshev

11,929
4
44
74

It keeps clicking the button instead of focusing the input with IE7 and FF4 – Sylvain Mar 29 '11 at 07:29
well, nesting an input in a button is invalid HTML. so it's not a very good idea to use it... – Alex Gyoshev Mar 29 '11 at 07:32
2

since you are using jQuery UI's button() for the button, why don't you get rid of the – charisis Mar 29 '11 at 07:34

score 1 · Accepted Answer · answered Mar 29 '11 at 07:45

1

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.

answered Mar 29 '11 at 07:45

Sapph

6,118
1
29
32

The button flashing is not a real problem. Thanks for this solution ! – Sylvain Mar 29 '11 at 07:47

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

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

edited May 23 '17 at 12:26

Community

1
1

answered Mar 29 '11 at 07:26

Jess

8,628
6
49
67

it's functionnal, but it's not "eye candy" enough :p – Sylvain Mar 29 '11 at 07:39
That is why I usually don't do javascript, but php. Functionality is all I'm good at :S – Jess Mar 29 '11 at 08:00

HTML Button with functional nested input

3 Answers3