MUI - 为textarea添加语音输入和清除的功能
2015-05-25 14:06
489 查看
为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); });
相关文章推荐
- html5为输入框添加语音输入功能
- 为textView添加语音输入功能(集成讯飞语音识别)
- html5为输入框添加语音输入功能
- html5为输入框添加语音输入功能
- 为textView添加语音输入功能的实例代码(集成讯飞语音识别)
- html5为输入框添加语音输入功能
- Android 带清除功能的输入框控件EditTextWithDel
- 基于微软嵌入式系统添加语音功能(语音合成与语音识别)
- Android 带清除功能的输入框控件EditText
- Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框
- Android 自定义EditText清除功能输入
- android 带清除功能的输入框控件
- <等待翻译>Android Wear 进阶 2.4 Adding Voice Capabilities 添加语音功能
- Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框
- x-webkit-speech 语音输入功能
- X-WEBKIT-SPEECH 语音输入功能
- Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框
- AngularJS实现动态添加输入控件功能
- HTML5中x-webkit-speech语音输入功能
- Vue实现textarea固定输入行数与添加下划线样式的思路详解