zoukankan      html  css  js  c++  java
  • MUI

    为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);
    		});
    
  • 相关阅读:
    POJ 1887 Testing the CATCHER
    HDU 3374 String Problem
    HDU 2609 How many
    POJ 1509 Glass Beads
    POJ 1458 Common Subsequence
    POJ 1159 Palindrome
    POJ 1056 IMMEDIATE DECODABILITY
    POJ 3080 Blue Jeans
    POJ 1200 Crazy Search
    软件体系结构的艺术阅读笔记1
  • 原文地址:https://www.cnblogs.com/phillyx/p/4527720.html
Copyright © 2011-2022 走看看