5 common mistakes programmers make in page friendliness and how to correct them

5 common mistakes programmers make when it comes to page friendliness and how to fix them:

I am a grumpy web user, but I think this also helped make me a good web developer. When I see an unpleasant design on a website, I get very irritated. Why can’t something very simple be done well? Here are 5 common usability mistakes and how to correct them. Make it convenient for yourself and others, and make sure you don't make such a mistake.

Use the express submit event instead of the click event; please use the form tag form!

I don’t know how many times I have encountered it. When I use the enter key to submit a form (or the arrow/enter key on my phone), But nothing happened. I had to click the submit button with the mouse again, and the form finally responded. This is one of the usability problems I hate the most. It looks like it was done by amateurs. Clicking the submit button with your mouse, or turning off the keyboard on your phone and scrolling to the bottom of the page to find the submit button, are annoying extra actions that don’t need to be done at all. You only need to use the submit event, and the web page will become much friendlier:

document.getElementById("myForm").addEventListener("submit",function(e) {

              e.preventDefault();

                                                                                    . .. Do processing here. Yay for "enter" key submission!

return false;

});

If you make such a mistake somewhere, please correct it immediately.

Don’t block click events when [CONTROL] or [META] keys are pressed

I am a person who really likes to open web pages in a new tab in the browser. I am looking for a new house recently, and I will do it at the same time Open many website pages and click on the pictures inside to view them, but unfortunately, these opened pages all enter the same tab. Very annoying. Before you use the preventDefault method on any link, please check if the user pressed the [CONTROL] or [META] key:

document.getElementById("myLink").addEventListener("click",function(e) {

                                                                                                                                            ​ });

I do this on my website and users don’t have similar issues when opening new tabs. Don’t force your users to keep hitting the back button on your website!

When setting text-overflow: ellipsis, please add the title attribute to your web page element.

Some new CSS properties or attribute values ​​are very useful, such as text-overflow: ellipsis. What methods have programmers often used to achieve this effect? I agree with text-overflow: ellipsis, but when I hover over this element, you'd better use the title attribute to display the complete information:

I am somereally, really long text that's going to be ellipsized

If you don't want to output the same content twice, you can use Js Dynamically set title. No matter how you implement it, please consider the users.

Don’t forget :focus and :active!

Many people ignore their status when designing styles for page elements. They only consider the user's mouse operation and forget that the user may use the keyboard to operate. Please use: Focus and: Active indicate their status:

a: Hover, A: Active, a: Focus { /* Change their style* /

color: #900; A good thing: next time you develop a website, please use the tab key to traverse all the elements on the page; if you press the tab key and the page does not change any focus, please check your style sheet to see if you forgot Let’s add some status styling to them!

Please use the search/email text box type

When filling out form information on mobile devices like phones or tablets, I ran into a super annoying problem because I had to switch keyboard modes to find the "@" character. I hope web developers will mature and learn to use the correct text box type:

With a little modification, you can bring great convenience to your mobile phone users.

There are many common mistakes that we programmers make, and I will write more articles on this in the future, but what is certain is that most of these mistakes are easy to correct, as long as you notice them.

Receive LAMP Brothers’ original PHP video tutorial CD/"Talking about PHP in detail" for free. For details, please contact the official website customer service: http://www.lampbrother.net

You can subscribe to the email and I will send you emails from time to time. Everyone shares IT related tutorials and books.