最近項目需要一個功能，實現漢字轉拼音功能，具體比如說輸入一個“你好”，同時帶出對應拼音“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