Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#12455 closed bug (cantfix)

Button click occurs when Enter is pressed in text input

Reported by: belerweb Owned by: belerweb
Priority: low Milestone: None
Component: event Version: 1.8.0
Keywords: Cc:
Blocked by: Blocking:

Description

I load a page into a div using '.load()' method. The loaded page have a text input element, no form.

When press 'Enter' key in the text input, the page will be load again.

I have wrote a sample test code as flows:

test.html:

page.html:

page.js: 

alert('test.js loaded.');

Steps：

  1. Open test.html
  2. Click button 'Load page into page'.
  3. Press 'Enter' key in the input 'Press 'Enter' key here"'.

Expect:

Nothing happend where press 'Enter' key.

Bug:

The page 'page.html' is loaded again and you can get the alert 'alert('test.js loaded.');',

Testcase:

IE7 standard: OK.

IE8 & IE9 standard: Failed.

Firefox: OK.

jQuery version: 1.7 - 1.8

Change History (9)

comment:1 Changed 8 years ago by belerweb

test.html 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
        $(function() {
                $('#load-page-into-page').click(function() {
                        $('#page').load('page.html');
                });
        });
</script>
</head>
<body>
        <button id="load-page-into-page">Load page into page</button>
        <div id="page" style="border: 1px solid; padding: 20px;"></div>
</body>
</html>

comment:2 Changed 8 years ago by belerweb

page.html 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="page.js"></script>
</head>
<body>
        <input type="text" value="Press 'Enter' key here" style="width: 200px;" />
</body>
</html>

comment:3 Changed 8 years ago by timmywil

Component: unfiled → ajax
Owner: set to belerweb
Priority: undecided → low
Status: new → pending

Thanks for taking the time to contribute to the jQuery project!

Do you have this test hosted somewhere?

comment:4 Changed 8 years ago by belerweb

Status: pending → new

Sorry for there is no hosted test. I am trying to use jsFiddle. But the 'load' method can not be executed on jsFiddle.

I have submit all the code (test.html, page.html and page.js) in comments. You can put the three sample file in any host to test.

comment:5 Changed 8 years ago by mikesherov

Status: new → pending

Thanks for contributing! You can not include an entire page, doctype and all, into the contents of an element on a page and expect predictable results. Please provide an example that only loads the the scripts and the contents of the body and see what happens. If you're still having issues, please seek help on the forum, stackoverflow, or IRC first before coming back to report the bug. Thanks!

comment:6 in reply to:  5 Changed 8 years ago by belerweb

Status: pending → new

Replying to mikesherov:

Thanks for contributing! You can not include an entire page, doctype and all, into the contents of an element on a page and expect predictable results. Please provide an example that only loads the the scripts and the contents of the body and see what happens. If you're still having issues, please seek help on the forum, stackoverflow, or IRC first before coming back to report the bug. Thanks!

'Only loads the the scripts and the contents of the body' is same as 'include an entire page' .

And I create a sample demo hosted at ​http://jsfiddle.net/NSzRd/.

comment:7 Changed 8 years ago by dmethvin

Resolution: → cantfix
Status: new → closed

The fiddle is still incorrect, here is a cleaned-up version: ​http://jsfiddle.net/dmethvin/NSzRd/2/

It has nothing to do with $.ajax, this is a simpler test case: ​http://jsfiddle.net/dmethvin/NSzRd/3/

The default is type=submit for a button. ​http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#edef-BUTTON

IE triggers a submit button if there is only one submit button and one text input on the page and you press Enter in that input. If you set the button to type=button the problem goes away: ​http://jsfiddle.net/dmethvin/NSzRd/5/

Note that older versions of IE default to type=button and newer versions may as well if they're in various compatibility views, so specifying it explicitly is a good idea if you want consistent behavior. ​http://msdn.microsoft.com/en-us/library/ie/ms535211(v=vs.85).aspx

Because of the complex interaction IE has here, this is not something I think we can reliably normalize across browsers. Fortunately, the solution is really easy, just add type=button to your buttons unless you really want them to be submit buttons.

Last edited 8 years ago by dmethvin (previous) (diff)

comment:8 Changed 8 years ago by dmethvin

Component: ajax → event
Summary: Trigger second execution when press 'Enter' in a page loaded by '.load' method. → Button click occurs when Enter is pressed in text input

comment:9 Changed 8 years ago by scottgonzalez

FWIW, I think browser vendors are still arguing over what the correct behavior is for cases like this.

Note: See TracTickets for help on using tickets.