<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>pinyin 获取汉字拼音</title>

    <link rel="stylesheet" href="https://npm.elemecdn.com/bootstrap@5.0.1/dist/css/bootstrap.min.css" />

</head>

<body>
    <div class="container-fluid">
        <div class="row mt-3">
            <div class="col-md mb-3">
                <input class="form-control nr-text1 fs-4" placeholder="输入中文:重要重庆">
            </div>
            <div class="col-md mb-3">
                <input class="form-control nr-text2 fs-4" placeholder="输入拼音:wang">
            </div>
            <div class="col-md-12 mb-3">
                <textarea class="form-control fs-4" rows="13" placeholder="输出"></textarea>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/gh/sxei/pinyinjs/dict/pinyin_dict_polyphone.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/sxei/pinyinjs/dict/pinyin_dict_withtone.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/sxei/pinyinjs/pinyinUtil.js"></script>

</body>

</html>
document.querySelector('.nr-text1').addEventListener('input', function () {
    var val = this.value, out = [];

    if (val != "") {
        out.push(`首字母:${pinyinUtil.getFirstLetter(val, true)}`)
        out.push(`带声调:${pinyinUtil.getPinyin(val, ' ', true, true)}`)
        out.push(`不带声调:${pinyinUtil.getPinyin(val, ' ', false, true)}`)
    }

    document.querySelector('textarea').value = out.join('\n');
}, false);

document.querySelector('.nr-text2').addEventListener('input', function () {
    var val = this.value, out = [];

    if (val != "") {
        var words = pinyinUtil.getHanzi(val).split(''), col = 9;
        for (var i = 0; i < words.length; i += col) {
            out.push(words.slice(i, i + col).join('\t'));
        }
    }

    document.querySelector('textarea').value = out.join('\n');
}, false);