在按钮内输入； 防止输入点击触发按钮点击但仍然能够输入值

Question

I have an input inside a button. I want the uset to be able to click in the input, enter some value, and then click the outside button.

<button onclick="button()">button
    <input onclick="input()"></input>
</button>

The problem however is that the default behavior is that clicking input will fire the button input as well because of obvious reason (input being inside the button).

So I tried to suppress the input's event from firing up and propagating

button.onclick = function () {
    alert('button was pressed');
}
input.onclick = function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
    alert('input was pressed');
}

but it also prevents anything from being entered into the input! or atleast it's not visible. Probably because I fiddled with the input's default event handling.

Is there a way to click into the input, not have the button fire its own click event (ie button stays independent (even though I've placed input inside of it)), and have the input work like it would've normally?

http://jsfiddle.net/laggingreflex/wmcrhLoz/

Answer 1

Here you go: http://jsfiddle.net/wmcrhLoz/2/

You just need e.stopPropagation(); in the input to stop the click event from bubbling to parent elements.

Your text is not visible because it is white. Change the color of the text in the input to black and it's fine.

#input {
    color: #000;
}