輸入漢字，自動轉成漢語拼音。。。

漢字自動轉換成拼音：

流程：

1. 先引入相對應的jar包

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

1. 編寫一個工具類

public class PinyinUtils {

	// 傳回一個拼音字元串，并且首字母大寫
	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("測試");
		System.out.println(yin);
	}
}

           

1. 在控制器裡面寫一個對應的方法

/**
	 * 把使用者名轉成拼音
	 */
	@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;
	}
           

1. 在前端界面進行展示

<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="請輸入使用者姓名" 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="請輸入登陸名稱" class="layui-input">
		   		</div>
		    </div>
	 	</div>
           

對應的js代碼

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