I'm afraid I don't know, I don't know--js escape problem

Source: Internet
Author: User

Encounter a more abnormal demand, due to the front desk product display needs, background input, need to pay attention to a lot of points, such as here to enter the punctuation must be full-width, where the input punctuation must be half-width.


What would you do if you got the demand?


This kind of thing, the online material is still many, but almost all cannot solve your problem directly. When I was doing this, the idea was: when the user entered the error, give him a hint.


This problem comes, the user constant input, constantly pop alert (), the experience is very unfriendly.


Then I took the second scenario, and when the user input was wrong, I added a <span> hint box after the text box. The user is prompted to enter an error, but this changes the style of the background input page. Also trouble front-end Big Brother this page, so directly adopted the third way.


The Third Way is simple, that is, when the user input, automatic correction.



Requirements : A "id is a" text box to enter all the punctuation, must be full-width, b "id B" text box must be a half-width of all the punctuation.

In the process of implementation, I encountered a problem: the auto-half corner can be fully successful (full-width turning half-angle), and half-angle to full-angle, but has failed!
get long time, just solve the problem. The process of solving is actually very wonderful, when I see the mybatis XML inside the <! [cdata[]>, I realized that it might be the problem of JS escaping.
think, why did you get long time to solve the problem?
or oneself JS This together of knowledge is deficient ah.

Below, put out the code, give everyone a tan:


$ (function () {$ ("form:input.required"). each (function () {var $required = $ ("<strong class= ' High ' > *</strong > "); Create element $ (this). Parent (). append ($required); Then append it to the document}); $ ("Form:input"). blur (function () {var $parent = $ (this). parent (); $parent. Find (". Formtips"). Remove (); #A ")) {if (this.value.length>16) {var errormsg = ' cannot exceed 16 characters! '; $parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> ');} if ($ ("#A"). Val (). length>0) {//half-width to full-width $ ("#A"). Val ($ ("#A"). Val (). replace (/\?/g, ' \? Replace (/\</g, ' '). Replace (/\>/g, ' "). Replace (/'/g, ' \ '). Replace (/'/g, ' \ '). Replace (/,/g, ', '). Replace (/\./g, '. '). Replace (/\;/g, '; '));}} if ($ (this). Is ("#B")) {if (this.value.length>12) {var errormsg = ' cannot exceed 12 characters! '; $parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> ');} if ($ ("#B"). Val (). length>0) {//full-width turn half-width $ ("#B"). Val ($ ("#B"). Val (). replace (/,/g, ', '). Replace (/'/g, ' \ '). /g, ' \ '). Replace (/;/g, '; '). Replace (/. /g, '. '). ReplacE (/"/g, ' < '). Replace (/"/g, ' > '). replace (/? /g, '? '));} }}). KeyUp (function () {$ (this). Triggerhandler ("blur");}). Focus (function () {$ (this). Triggerhandler ("blur");})



As above code: punctuation half angle to full angle, need to escape. As for the reason, in JS inside "." Represents a match for all characters. So when I replace the input, it will match all the characters to ". "。

Others, you can check your own, to understand it.


PS: Studied for some time jquery, finally a little feeling ~ ~ ~


The function has the size, perfect is the standard.

I'm afraid I don't know, I don't know--js escape problem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.