5 Mistakes programmers make on page-friendliness and how to correct them

5 Mistakes programmers make on page-friendliness and how to fix them: I'm a grumpy Web user, but I think it helped me become a great web developer. When I look at a site that has unpleasant designs, I get very angry, and some very simple things why not? Here are 5 common usability errors and ways to correct them. It is convenient and convenient for you to make sure you don't make such mistakes. Use the Express submit event, do not use the Click event; Please use the form label form! I don't know how many times I've encountered it when I submit a form using the ENTER (or the arrow/input key on my phone), but nothing happens. I had to use the mouse to click the Submit button, the form has finally reacted. This is the most I hate a Web page usability problems, a look is the amateur people do. Click the Submit button with your mouse, or close the keyboard on your phone and scroll to the bottom of the page to find the Submit button, which is a nasty extra action that doesn't have to be done at all. You only need to use the Submit event and the webpage becomes much friendlier: document.getElementById ("MyForm"). AddEventListener ("Submit", function (e) { E.preventdefault (); // ... Do processing here. Yay for "Enter" key submission! return false;}); If you have made such a mistake somewhere, please correct it immediately. Do not block Click events when there is a [CONTROL] or [META] key pressed I am a person who likes to open a page in a new browser tab, I am looking for a new house recently, I will open a lot of web pages at the same time, click on the pictures inside to watch, but unfortunately, The pages that you open go to the same tab. Very annoying. Before you use the Preventdefault method for any link, check to see if the user has pressed the [CONTROL] or [META] key: document.getElementById ("MyLink"). AddEventListener (" Click ", Function (e) {///E.preventdefault (); (bad) if (E.meta | | e.ctrlkey) return; If the user wants to open a new window, please release E.preventdefault ();}); That's what I do on my site, and users don't get a similar problem when they open a new tab. Don't force your users to keep clicking the back button on your website! In the setup Text-overflow:elWhen Lipsis, add the Title property to your page element, and some new CSS properties or property values are very useful, such as text-overflow:ellipsis. Programmers have often used methods to achieve this effect. I agree with the use of text-overflow:ellipsis, but when I hover over this element with my mouse, you'd better display the full message with the Title property: I am somereally, really long text that's going to be E llipsized If you do not want to output the same content two times, you can use the JS dynamic settings title. Regardless of how it is achieved, please think for the user. Don't forget: Focus and: active! Many people ignore their state when they design the page elements, only consider the user using the mouse operation, forget that the user may be using the keyboard operation. Please use: Focus and: Active to indicate their status: A:hover,a:active, A:focus {/* change their style */color: #900;} Do a good thing to the user: The next time you develop a website, use the TAB key to traverse all the elements on the page; If you press TAB key, the page does not have any focus point changes, please check your stylesheet to see if you forgot to add some state styles to them! Please use the Search/email text box type when populating the form information on mobile devices such as a phone or tablet, I have a problem with super-trouble because I have to switch the keyboard mode to find the "@" character. I want Web developers to be mature and learn to use the right type of text box: A little modification will give your mobile phone users a great deal of convenience. We programmers often make a lot of mistakes, and later I will write more articles on this, but to be sure, most of these errors are easy to correct, as long as you notice them. Free to receive the lamp brother even original PHP video tutorial CD/"Detailed PHP" Essentials Edition, details of the website customer service: http://www.lampbrother.net You can subscribe to the mail, I will occasionally share it-related tutorials and books. http://list.qq.com/cgi-bin/qf_invite?id=ea7d919ad263169bce2be53a3e16da0f0ec55ac36513c68e

