jQuery拼音插件_jQuery汉字转拼音插件
2017-10-09 13:34:21  By: shinyuu

分享一个非常实用的 jQuery 中文转拼音的小程序,Demo是带编号的一款支持自动生成拼音的小程序,点击确定按钮可以计算出这个姓名对应的唯一编号。非常实用的,一般可以用到信用卡办理的申请界面上面的。效果图如下:

jquery汉字转拼音插件


所以代码已经封装到 js 文件里面,我们只需要简单的调用就好了、代码如下:

HTML代码

<div class="container">
    <div class="list">
        <span>
            <label>姓名:</label>
            <input class="xv_hanzi" type="text" placeholder="在这里输入中文" onKeyUp="value=value.replace(/[^u4E00-u9FA5]/g,´´)" />
        </span>
        <span>    
            <label>拼音:</label>
            <input type="text" class="xv_pinyin">
        </span>
        <span class="xv_go">
            <input class="xv_submit" type="button" value="GO">
        </span>
    </div>
    
    <div class="shengcheng"></div>
    
</div>


JS加载代码

$(function() {
    $(´.xv_hanzi´).on(´focusout´,function(event) {
        event.preventDefault();
        var value=$(this).val();
        $(this).parents(´.list´).find(´.xv_pinyin´).val(getPinYinByName(value));
    }).enter(function(){
        var value=$(this).val();
        $(this).focus();
        $(this).parents(´.list´).find(´.xv_pinyin´).val(getPinYinByName(value));
    }).on(´click´,function(event) {
        event.preventDefault();
        if(!$(this).val()==´´){
            $(this).val(´´);
            $(this).parents(´.list´).find(´.xv_pinyin´).val(´´);
        }
    });;
    $(´.xv_submit´).on(´click´,function(event) {
        event.preventDefault();
        var name=$(this).parents(´.list´).find(´.xv_hanzi´).val();
        var pinyin=$(this).parents(´.list´).find(´.xv_pinyin´).val();
        if(name==´´){
            alert(´è¯·è¾“入您的姓名!´);
            return false;
        }else{
            $(this).parents(´.list´).siblings(´.shengcheng´).text(getCodeByPinYin(pinyin));
        }
    });
});


转拼音函数

function getPinYinByName(l1) {
    var l2 = l1.length;
    var I1 = "";
    var reg = new RegExp(´[a-zA-Z0-9- ]´);
    for (var i = 0; i < l2; i  ) {
        var val = l1.substr(i, 1);
        var name = arraySearch(val, PinYin);
        if (reg.test(val)) {
            I1  = val;
        } else if (name !== false) {
            I1  = name;
        }

    }
    I1 = I1.replace(/ /g, ´-´);
    while (I1.indexOf(´--´) > 0) {
        I1 = I1.replace(´--´, ´-´);
    }
    return I1.toLowerCase();
}


以上是部分代码、更多代码可以下载源代码查看、下面是Demo的下载地址

纯jquery实现jquery汉字转拼音插件源代码下载链接: jquery 汉字转成拼音 密码: 4khc

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+