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、实现效果

aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,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" alt="" />

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