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.