如何实现，有多个输入框,要求第一个输入框输入汉字后,第二个输入框自动填充对应的大写拼音

如何实现，有多个输入框,要求第一个输入框输入汉字后,第二个输入框自动填充对应的大写拼音


```javascript
vue的话：
<input v-model="value" /> <input :value="value.toUpperCase()" />

原生的话：
<input id="input1"/> <input id="input2" />
document.getElementById('input1').on('input',(e)=>{
  document.getElementById('input2').value = e.tage.value.toUpperCase()
})
react 逻辑和vue差不多 就不写了..

```

搜索“pinyin js”,找一个合适的示例参考

<!-- HTML -->
<input id="input1" type="text">
<input id="input2" type="text">

// JavaScript
const pinyin = require('pinyin');

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

input1.addEventListener('input', () => {
  input2.value = pinyin(input1.value, {
    style: pinyin.STYLE_UPPERCASE,
  }).join('');
});

如果使用的是 pinyin-js 库，则需要使用 toUpperCase() 方法将拼音转换为大写。

// JavaScript
const pinyin = require('pinyin');

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

input1.addEventListener('input', () => {
  input2.value = pinyin(input1.value, {
    heteronym: true, // 允许多音字
  })
    .map(([pinyin]) => pinyin) // 只保留拼音
    .join('') // 转换为字符串
    .toUpperCase(); // 转换为大写
});

望采纳。

第一步-----安装

npm install js-pinyin
 
import pinyin from 'js-pinyin'

第二步-----实现

<el-form-item label="名称" prop="Name">
    <el-input v-model="form.Name" placeholder="名称"  @input="linkage()"/>
</el-form-item>
<script>
methods: {
    linkage(){
        let pinyin = require('js-pinyin')
        pinyin.setOptions({checkPolyphone: false, charCase: 0})
        this.form.NamePy=pinyin.getCamelChars(this.form.Name)
    }
}
</script>

第三步-----补充


    console.log(pinyin.getFullChars('管理员'));    //GuanLiYuan
    console.log(pinyin.getCamelChars('管理员'));    //GLY
    console.log(pinyin.getCamelChars('1234'));    //1234
    console.log(pinyin.getCamelChars('english'));    //english

实现效果

img