MUI - 为textarea添加语音输入和清除的功能
2024-09-01 10:48:22
为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);
});
最新文章
- R实现灰色预测
- RecyclerView和PullToRefreshListView的对比
- Extjs 表格横坐标显示问题
- VS Copy Files after build
- 我是如何使用git的
- hdoj 5344 MZL&#39;s xor
- php 日期
- 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply
- Spring发送电子邮件
- com.google.common.collect.Lists#transform使用注意
- android企业级商城源码、360&#176;全景图VR源码、全民直播源码等
- hql(Hibernate Query Language)
- 排序之冒泡排序(bubblesort)
- 一个PHP session的误区,自己留着长记性看看
- c/c++线性队列
- ERP合同列表页面自动导航(三十二)
- 一:理解ASP.NET的运行机制(例:通过HttpModule来计算页面执行时间)
- bzoj2325
- 【CSS】易错
- LG3391 【模板】文艺平衡树(Splay)