漢字自動(dòng)轉(zhuǎn)換成拼音：

流程：

1. 先引入相對(duì)應(yīng)的jar包

<!-- pinyin4j -->
        <dependency>
            <groupId>com.belerweb</groupId>
            <artifactId>pinyin4j</artifactId>
            <version>${pinyin4j.version}</version>
        </dependency>

2. 編寫一個(gè)工具類

public class PinyinUtils {

    // 返回一個(gè)拼音字符串，并且首字母大寫
    public static String getPingYin(String inputString) {
        HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
        format.setCaseType(HanyuPinyinCaseType.LOWERCASE);
        format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
        format.setVCharType(HanyuPinyinVCharType.WITH_V);
        String output = "";
        if (inputString != null && inputString.length() > 0 && !"null".equals(inputString)) {
            char[] input = inputString.trim().toCharArray();
            try {
                for (int i = 0; i < input.length; i++) {
                    if (Character.toString(input[i]).matches("[\\u4E00-\\u9FA5]+")) {
                        String[] temp = PinyinHelper.toHanyuPinyinStringArray(input[i], format);
                        output += temp[0];
                    } else
                        output += Character.toString(input[i]);
                }
            } catch (BadHanyuPinyinOutputFormatCombination e) {
                e.printStackTrace();
            }
        } else {
            return "*";
        }
        return output;
    }

    public static void main(String[] args) {
        String yin = getPingYin("測(cè)試");
        System.out.println(yin);
    }
}

3. 在控制器里面寫一個(gè)對(duì)應(yīng)的方法

/**
     * 把用戶名轉(zhuǎn)成拼音
     */
    @RequestMapping("changeChineseToPinyin")
    public Map<String,Object> changeChineseToPinyin(String username){
         Map<String,Object> map=new HashMap<>();
         if(null!=username) {
             map.put("value", PinyinUtils.getPingYin(username));
         }else {
             map.put("value", "");
         }
         return map;
    }

4. 在前端界面進(jìn)行展示

<div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用戶姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="username" lay-verify="required" autocomplete="off" placeholder="請(qǐng)輸入用戶姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
               <label class="layui-form-label">登陸名稱</label>
                <div class="layui-input-inline">
                    <input type="text" name="loginname" id="loginname" lay-verify="required"  autocomplete="off" placeholder="請(qǐng)輸入登陸名稱" class="layui-input">
                </div>
            </div>
        </div>

對(duì)應(yīng)的js代碼

//監(jiān)聽用戶名的失去焦點(diǎn)事件
        $("#username").on("blur",function(){
            var username=$(this).val();
            $.get("/user/changeChineseToPinyin",{username:username},function(res){
                $("#loginname").val(res.value);
            })
        });