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);
    		});
    
  • 相关阅读:
    简明Vim练级攻略
    linux之cat命令
    linux之cat,more,less,head,tail
    linux之touch命令修改文件的时间戳
    linux 之创建文件命令
    python开发_function annotations
    python开发_python中的range()函数
    python开发_python中的module
    python开发_python中的函数定义
    python开发_python关键字
  • 原文地址:https://www.cnblogs.com/phillyx/p/4527720.html
Copyright © 2011-2022 走看看