js如何简单实现汉字转成拼音的功能 - 小小邪 - 博客园

baacloud免费翻墙vpn注册使用

来源: js如何简单实现汉字转成拼音的功能 – 小小邪 – 博客园

  最近项目需要一个功能,实现汉字转拼音功能,具体比如说输入一个“你好”,同时带出对应拼音“NiHao”,在此做一下记录

1、首先引入两个文件

    <script src="jquery.min.js"></script>
    <script src="Convert_Pinyin.js"></script>

2、html设计

复制代码
 <body>
        <div>         
             输入名称:<input type="text" id="chinaName"  onBlur="ConvertName()" />  <br/>  
             全写拼音:<input type="text" id="fullName" /> <br/> 
             简写拼音:<input type="text" id="easyName" /> <br/> 
        </div>    
 </body>
复制代码

3、js方法

复制代码
<script>
       var ConvertName = function(){    
            var chinaName = $('#chinaName').val();    
            //获取全写拼音(调用js中方法)        
            var fullName = pinyin.getFullChars(chinaName);
            //获取简写拼音(调用js中方法)
            var easyName = pinyin.getCamelChars(chinaName);    
            //给两个文本框赋值    
            $('#fullName').val(fullName);
            $('#easyName').val(easyName);
       }
</script>
复制代码

4、实现效果

5、整体demo

复制代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何实现汉字转拼音功能</title>
    </head>
    <script src="jquery.min.js"></script>
    <script src="Convert_Pinyin.js"></script>
    <script>            
        var ConvertName = function(){    
            var chinaName = $('#chinaName').val();    
            //获取全写拼音(调用js中方法)        
            var fullName = pinyin.getFullChars(chinaName);
            //获取简写拼音(调用js中方法)
            var easyName = pinyin.getCamelChars(chinaName);    
            //给两个文本框赋值    
            $('#fullName').val(fullName);
            $('#easyName').val(easyName);
        }
        
    </script>
    <body>
        <div>         
             输入名称:<input type="text" id="chinaName"  onBlur="ConvertName()" />  <br/>  
             全写拼音:<input type="text" id="fullName" /> <br/> 
             简写拼音:<input type="text" id="easyName" /> <br/> 
        </div>    
    </body>
</html>
复制代码

6、汉字转拼音js下载路径:

链接:https://pan.baidu.com/s/1NZ4noIgHv2HSzZW6yBRTxA    密码:2kv1

平时多记记,到用时才能看看,记录你的进步,分享你的成果
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏