MUI - 爲textarea添加語音輸入和清除的功能

爲textarea添加語音輸入和清除的功能

mui支持input輸入框語音輸入和清除的功能，只須要添加相關css類便可.

http://www.cnblogs.com/phillyx/

代碼以下

<div class="mui-input-row">
						<label>Input</label>
						<input type="text" class="mui-input-clear" placeholder="帶清除按鈕的輸入框">
					</div>

					<div class="mui-input-row">
						<label>Input</label>
						<input type="text" class="mui-input-speech mui-input-clear" placeholder="語音輸入">
					</div>

若是咱們想要給textarea也添加相同的功能應該怎麼作呢？
mui.js確定對input封裝了相關的事件，果真
input.plugin.js
咱們看最後

$.ready(function() {
		$($.classSelector('.input-row input')).input();
	});

對input添加原生方法，textarea是否是也能夠這樣作呢？試一試

<div class="mui-input-row" style="margin: 10px 5px;">
					<textarea id="textarea" rows="5" placeholder="多行文本框" class="mui-input-speech mui-input-clear"></textarea>
				</div>

mui.ready(function() {
				mui('.mui-input-row textarea').input();
			});

測試一下，徹底能夠。
不過有一個小問題，語音輸入封裝的是科大訊飛的識別軟件，在轉換爲文字的時候，,.。不區分全角半角重複加載，因此要添加相關事件進行替換

//語音識別完成事件
		document.getElementById("search").addEventListener('recognized', function(e) {
			console.log(e.detail.value);
			this.value=e.detail.value.replace(/，/g,'').replace(/,。/g,'。');
			console.log(this.value);
		});