JS 文本框失去焦点修改全半角文字和符号

最新推荐文章于 2023-12-01 16:33:10 发布

fengyehongWorld

最新推荐文章于 2023-12-01 16:33:10 发布

阅读量289

点赞数

分类专栏： # JS 文章标签： javascript 前端

本文链接：https://blog.csdn.net/feyehong/article/details/125491225

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

⏹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>
    半角数字<input type="text" data-validate="number">
    <hr>
    半角邮箱<input type="text" data-validate="email">
    <hr>
    带分号的时间<input type="text" data-validate="time">
</body>
<script src="../jquery.min.js"></script>
<script type="module" src="./js/17-main.js"></script>
</html>

⏹主方法

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

$(function() {
    
    // 给所有含data-validate的文本输入框绑定焦点失去事件
    for(const element of Array.from($('input:text')).values()) {

        // 当文本输入框没有 data-validate 属性的时候
        const validatetype = element.dataset?.validate;
        if(!validatetype) {
            return;
        }

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

            // 获取校验转换的类型
            const validatetypeList = target.dataset?.validate.split(',');

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

                // 根据要校验的类型执行对应的方法,将转换之后文本放回文本框中
                const invokeMethod = typeHandleMap.get(validatetype);
                target.value = invokeMethod.call(this, target.value);
            }
        });
    }
});

⏹封装的工具类

class textHandleUtils {

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

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

    constructor() {}

    // 半角转换全角(英数符号)
    han2ZenAlphaNumberSymbol(value) {
        return value.replace(/[!-~]/g, function (s) {
            return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
        });
    }

    // 全角转换半角(英数符号)
    zen2HanAlphaNumberSymbol(value) {
        let s = value.replace(/[！-～]/g, function (s) {
            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
        });
        return s.replace(/[‐－―ー]/g, '-');
    }

    // 全角假名转换半角假名
    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, 'ﾟ');
    }

    // 半角假名转换全角假名
    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, '゜');
    }

    // 删除数字和 - 之外
    removeNonHyphenNumber(value) {
        return value.replace(/[^\d-]/g, '');
    }

    // 删除数字和 : 之外
    removeNonColonNumber(value) {
        return value.replace(/[^\d:]/g, '');
    }

    // 删除数字之外
    removeNonNumber(value) {
        return value.replace(/[^\d]/g, '');
    }
}
const textHandleClass = new textHandleUtils();

// 类型对应的处理方法
const typeHandleMap = new Map([
    // 全角
    ['zenkaku', (value) => {
        const value1 = textHandleClass.han2ZenKana(value);
        return textHandleClass.han2ZenAlphaNumberSymbol(value1);
    }],
    // 半角
    ['hankaku', (value) => {
        const value1 = textHandleClass.zen2HanKana(value);
        return textHandleClass.zen2HanAlphaNumberSymbol(value1);
    }],
    // 邮箱
    ['email', (value) => {
        return textHandleClass.zen2HanAlphaNumberSymbol(value);
    }],
    // 电话
    ['tel', (value) => {
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonHyphenNumber(value1);
    }],
    // 邮编
    ['postCode', (value) => {
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonHyphenNumber(value1);
    }],
    // 用户名
    ['userName', (value) => {
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.han2ZenKana(value1);
    }],
    // 时间
    ['time', (value) => {
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonColonNumber(value1);
    }],
    // 数字
    ['number', (value) => {
        const value1 = textHandleClass.zen2HanAlphaNumberSymbol(value);
        return textHandleClass.removeNonNumber(value1);
    }]
]);

export default typeHandleMap;