当前位置：网站首页>JS text box loses focus to modify width text and symbols

JS text box loses focus to modify width text and symbols

2022-06-28 05:01:00 【fengyehongWorld】

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr>
     Half angle digit <input type="text" data-validate="number">
    <hr>
     Half width mailbox <input type="text" data-validate="email">
    <hr>
     Time with semicolon <input type="text" data-validate="time">
</body>
<script src="../jquery.min.js"></script>
<script type="module" src="./js/17-main.js"></script>
</html>

Main method

import typeHandleMap from './17-utils.js'

$(function() {
    
    
    //  Give all that contain data-validate The text input box is bound to the focus loss event 
    for(const element of Array.from($('input:text')).values()) {
    

        //  When the text input box does not have  data-validate  When attributes 
        const validatetype = element.dataset?.validate;
        if(!validatetype) {
    
            return;
        }

        $(element).on('blur', ({
     target}) => {
    

            //  Get the type of validation conversion 
            const validatetypeList = target.dataset?.validate.split(',');

            for(const validatetype of validatetypeList.values()) {
    

                //  Execute the corresponding method according to the type to be verified , Put the converted text back into the text box 
                const invokeMethod = typeHandleMap.get(validatetype);
                target.value = invokeMethod.call(this, target.value);
            }
        });
    }
});

Encapsulated tool class

class textHandleUtils {
    

    //  Correspondence between full width and half width Kanas 
    zen2HanKanaMap = {
    
        'ガ': 'ｶﾞ', 'ギ': 'ｷﾞ', 'グ': 'ｸﾞ', 'ゲ': 'ｹﾞ', 'ゴ': 'ｺﾞ',
        'ザ': 'ｻﾞ', 'ジ': 'ｼﾞ', 'ズ': 'ｽﾞ', 'ゼ': 'ｾﾞ', 'ゾ': 'ｿﾞ',
        'ダ': 'ﾀﾞ', 'ヂ': 'ﾁﾞ', 'ヅ': 'ﾂﾞ', 'デ': 'ﾃﾞ', 'ド': 'ﾄﾞ',
        'バ': 'ﾊﾞ', 'ビ': 'ﾋﾞ', 'ブ': 'ﾌﾞ', 'ベ': 'ﾍﾞ', 'ボ': 'ﾎﾞ',
        'パ': 'ﾊﾟ', 'ピ': 'ﾋﾟ', 'プ': 'ﾌﾟ', 'ペ': 'ﾍﾟ', 'ポ': 'ﾎﾟ',
        'ヴ': 'ｳﾞ', 'ヷ': 'ﾜﾞ', 'ヺ': 'ｦﾞ',
        'ア': 'ｱ', 'イ': 'ｲ', 'ウ': 'ｳ', 'エ': 'ｴ', 'オ': 'ｵ',
        'カ': 'ｶ', 'キ': 'ｷ', 'ク': 'ｸ', 'ケ': 'ｹ', 'コ': 'ｺ',
        'サ': 'ｻ', 'シ': 'ｼ', 'ス': 'ｽ', 'セ': 'ｾ', 'ソ': 'ｿ',
        'タ': 'ﾀ', 'チ': 'ﾁ', 'ツ': 'ﾂ', 'テ': 'ﾃ', 'ト': 'ﾄ',
        'ナ': 'ﾅ', 'ニ': 'ﾆ', 'ヌ': 'ﾇ', 'ネ': 'ﾈ', 'ノ': 'ﾉ',
        'ハ': 'ﾊ', 'ヒ': 'ﾋ', 'フ': 'ﾌ', 'ヘ': 'ﾍ', 'ホ': 'ﾎ',
        'マ': 'ﾏ', 'ミ': 'ﾐ', 'ム': 'ﾑ', 'メ': 'ﾒ', 'モ': 'ﾓ',
        'ヤ': 'ﾔ', 'ユ': 'ﾕ', 'ヨ': 'ﾖ',
        'ラ': 'ﾗ', 'リ': 'ﾘ', 'ル': 'ﾙ', 'レ': 'ﾚ', 'ロ': 'ﾛ',
        'ワ': 'ﾜ', 'ヲ': 'ｦ', 'ン': 'ﾝ',
        'ァ': 'ｧ', 'ィ': 'ｨ', 'ゥ': 'ｩ', 'ェ': 'ｪ', 'ォ': 'ｫ',
        'ッ': 'ｯ', 'ャ': 'ｬ', 'ュ': 'ｭ', 'ョ': 'ｮ',
        '.': '｡', '、': '､', 'ー': 'ｰ', '「': '｢', '」': '｣', '・': '･'
    };

    //  Correspondence between half width and full width Kanas 
    han2ZenKanaMap = {
    
        'ｶﾞ': 'ガ', 'ｷﾞ': 'ギ', 'ｸﾞ': 'グ', 'ｹﾞ': 'ゲ', 'ｺﾞ': 'ゴ',
        'ｻﾞ': 'ザ', 'ｼﾞ': 'ジ', 'ｽﾞ': 'ズ', 'ｾﾞ': 'ゼ', 'ｿﾞ': 'ゾ',
        'ﾀﾞ': 'ダ', 'ﾁﾞ': 'ヂ', 'ﾂﾞ': 'ヅ', 'ﾃﾞ': 'デ', 'ﾄﾞ': 'ド',
        'ﾊﾞ': 'バ', 'ﾋﾞ': 'ビ', 'ﾌﾞ': 'ブ', 'ﾍﾞ': 'ベ', 'ﾎﾞ': 'ボ',
        'ﾊﾟ': 'パ', 'ﾋﾟ': 'ピ', 'ﾌﾟ': 'プ', 'ﾍﾟ': 'ペ', 'ﾎﾟ': 'ポ',
        'ｳﾞ': 'ヴ', 'ﾜﾞ': 'ヷ', 'ｦﾞ': 'ヺ',
        'ｱ': 'ア', 'ｲ': 'イ', 'ｳ': 'ウ', 'ｴ': 'エ', 'ｵ': 'オ',
        'ｶ': 'カ', 'ｷ': 'キ', 'ｸ': 'ク', 'ｹ': 'ケ', 'ｺ': 'コ',
        'ｻ': 'サ', 'ｼ': 'シ', 'ｽ': 'ス', 'ｾ': 'セ', 'ｿ': 'ソ',
        'ﾀ': 'タ', 'ﾁ': 'チ', 'ﾂ': 'ツ', 'ﾃ': 'テ', 'ﾄ': 'ト',
        'ﾅ': 'ナ', 'ﾆ': 'ニ', 'ﾇ': 'ヌ', 'ﾈ': 'ネ', 'ﾉ': 'ノ',
        'ﾊ': 'ハ', 'ﾋ': 'ヒ', 'ﾌ': 'フ', 'ﾍ': 'ヘ', 'ﾎ': 'ホ',
        'ﾏ': 'マ', 'ﾐ': 'ミ', 'ﾑ': 'ム', 'ﾒ': 'メ', 'ﾓ': 'モ',
        'ﾔ': 'ヤ', 'ﾕ': 'ユ', 'ﾖ': 'ヨ',
        'ﾗ': 'ラ', 'ﾘ': 'リ', 'ﾙ': 'ル', 'ﾚ': 'レ', 'ﾛ': 'ロ',
        'ﾜ': 'ワ', 'ｦ': 'ヲ', 'ﾝ': 'ン',
        'ｧ': 'ァ', 'ｨ': 'ィ', 'ｩ': 'ゥ', 'ｪ': 'ェ', 'ｫ': 'ォ',
        'ｯ': 'ッ', 'ｬ': 'ャ', 'ｭ': 'ュ', 'ｮ': 'ョ',
        '｡': '.', '､': '、', 'ｰ': 'ー', '｢': '「', '｣': '」', '･': '・', '-': 'ー', 
    };

    constructor() {
    }

    //  Half width to full width ( English sign )
    han2ZenAlphaNumberSymbol(value) {
    
        return value.replace(/[!-~]/g, function (s) {
    
            return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
        });
    }

    //  Full width to half width ( English sign )
    zen2HanAlphaNumberSymbol(value) {
    
        let s = value.replace(/[！-～]/g, function (s) {
    
            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
        });
        return s.replace(/[‐－―ー]/g, '-');
    }

    //  Full width kana to half width kana 
    zen2HanKana(value) {
    
        const reg = new RegExp('(' + Object.keys(this.zen2HanKanaMap).join('|') + ')', 'g');
        return value.replace(reg, function (match) {
     return kanaMap[match]; }).replace(/゛/g, 'ﾞ').replace(/゜/g, 'ﾟ');
    }

    //  Half width kana to full width kana 
    han2ZenKana(value) {
    
        const reg = new RegExp('(' + Object.keys(this.han2ZenKanaMap).join('|') + ')', 'g');
        return value.replace(reg, function (match) {
     return kanaMap[match]; }).replace(/ﾞ/g, '゛').replace(/ﾟ/g, '゜');
    }

    //  Delete numbers and  -  outside 
    removeNonHyphenNumber(value) {
    
        return value.replace(/[^\d-]/g, '');
    }

    //  Delete numbers and  :  outside 
    removeNonColonNumber(value) {
    
        return value.replace(/[^\d:]/g, '');
    }

    //  Delete other than numbers 
    removeNonNumber(value) {
    
        return value.replace(/[^\d]/g, '');
    }
}
const textHandleClass = new textHandleUtils();

//  The processing method corresponding to the type 
const typeHandleMap = new Map([
    //  Full angle 
    ['zenkaku', (value) => {
    
        const value1 = textHandleClass.han2ZenKana(value);
        return textHandleClass.han2ZenAlphaNumberSymbol(value1);
    }],
    //  Half angle 
    ['hankaku', (value) => {
    
        const value1 = textHandleClass.zen2HanKana(value);
        return textHandleClass.zen2HanAlphaNumberSymbol(value1);
    }],
    //  mailbox 
    ['email', (value) => {
    
        return textHandleClass.zen2HanAlphaNumberSymbol(value);
    }],
    //  Telephone 
    ['tel', (value) => {
    
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonHyphenNumber(value1);
    }],
    //  Zip code 
    ['postCode', (value) => {
    
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonHyphenNumber(value1);
    }],
    //  user name 
    ['userName', (value) => {
    
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.han2ZenKana(value1);
    }],
    //  Time 
    ['time', (value) => {
    
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonColonNumber(value1);
    }],
    //  Numbers 
    ['number', (value) => {
    
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonNumber(value1);
    }]
]);

export default typeHandleMap;