<!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>中文转拼音</title>
</head>
<body>
<div>
输入名称：<input type="text" id="chinaName" /> <br />
全写拼音：<input type="text" id="fullName" /> <br />
简写拼音：<input type="text" id="easyName" /> <br />
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./Convert_Pinyin.js"></script>
<script>
$(function () {
$('#chinaName').on('change', function () {
console.log('123');
var chinaName = $('#chinaName').val();
var fullName = pinyin.getFullChars(chinaName);//获取全写拼音（调用js中方法）
var easyName = pinyin.getCamelChars(chinaName); //获取简写拼音（调用js中方法）
//给两个文本框赋值
$('#fullName').val(fullName);
$('#easyName').val(easyName);
})
})
</script>
</html>页面上显示三个输入框，对应三个id
chinaName的输入框触发change事件后进行处理，将处理后的值复制到对应的两个输入框上。