Used in the form <button> attention point

In this paper, I thought the idea of ​​recording the survey questions, the students want to see the conclusion it directly onto the final

Last week, in doing the project, there is a demand plus a button on the page, tap query the database content filling in the table. This is not a very simple thing, add a page button to send ajax request to get the data, populate the table. After writing this but in a process that has everything is all right, when after click a button and an input box elsewhere in the page suddenly turned red bold? ? ? ? It will look like this.
1.png

The first time I saw such a thing, the code has never been set. After then looked at input tag found is written

<input type="text" id="money" pattern="[0-9]*" />

pattern is a regular expression used to validate the input, the above code is clearly meant only numbers, commas amount is certainly not verified, and found the source of the red box (for different browsers have different error display, IE11 red box for the display and tooltip, Chrome only tooltip). Here is the pattern for Chrom in the show.
Chrome in style

Know how red box is out of this role is only prescribed pattern digital input, I deleted this pattern, the control can only enter numbers in other ways, such as when keyup use regular expressions to remove characters other than numbers . Although this time the click of a button, a red box will not report shows.

Just when I thought changed completely call it a day, after the completion of the test input input habitual knock a carriage return, then the table of contents is automatically filled in? ? ? ? WTF, how could such a thing occur. I could not understand how, Enter will trigger a click event? ? ? ? Getting beyond my knowledge of.

Normal input box hit enter will not lose focus and do not trigger any event ah, when after investigation that there is only one input form input box, the user presses the Enter key will submit the form. But I have a lot of page input box, ah, do not submit the form. This can only paused to remove the fundamental way to solve the problem is not a pattern, or otherwise located. Then continue the input box red box of investigation appear.

Js comma input box is dynamically added demand is to add a comma to say that I can not always get rid of this process. Then I look for in other pages, discover other pages have exactly the same amount of input box, enter the same value why other pages not go wrong?

And then they continue to investigate the red box is at what point will trigger, the result is found to trigger the form submit button when pressed. That is trigger when clicked submit. So the key question went to my new button above.

 <button id="getData" class="dataBtn">填充数据<button>

At first glance and without any problems, then from basic science, W3school above is written
2.png

Is it because I do not have to add type = "button", and then try to hold mentality add into it, the last discovered they solved the problem.
Why then continue to see such a big impact type
3.png

Read the above description probably understand why the error occurred, that I did not add the type type, leading to press the button became submit the form, triggering the verification pattern, resulting in a red box. But our project is to use IE browser, but still submitted the form, this description W3school still problematic. But after writing when the button must remember to add of the type , otherwise it will lead to inexplicable errors.

Finally, a small sum up, the survey found the following problems.

1, when the form is only one input box, pressing Enter will submit the form. But although there are more in the form input boxes, but added there is no type of button, you will be treated as the submit button, press the Enter button event triggers.

2, button label must be sure to add some type attribute, although the documentation says IE browser type = "button", but later found in IE is still submit.

3, a supplemental questions previously encountered. That is, the input type = "image", the official description of this property is worth is defined submit button image form. Submit button, submit button, submit button, it is important to say three times, this is not to place the picture of the label, it is best to use an img tag, click on the picture and avoid an event.

Guess you like

Origin www.cnblogs.com/ghq120/p/11566805.html