<!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>
Se muestran tres cuadros de entrada en la página, correspondientes a tres ID.
El cuadro de entrada de chinaName se procesa después de que se activa el evento de cambio y el valor procesado se copia en los dos cuadros de entrada correspondientes.