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);
});
MUI - 为textarea添加语音输入和清除的功能的更多相关文章
- HTML5为输入框添加语音输入功能
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...
- HTML5语音输入方法
谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索.可惜的是只有webkit核心的浏览器才能使用.用法很简单只需要在input添加属性 x-webkit-speech 即可,例 ...
- HoloLens开发手记 - 语音输入 Voice input
语音是HoloLens三大重要输入形式之一.它允许你直接通过语言控制全息图像,而不用借助手势.你只要凝视全息图像然后说出语音命令即可.语音输入是自然的交互方式,它能够很好的改善复杂的交互,因为通过一条 ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- android上使用蓝牙设备进行语音输入
主要实现步骤如下:1.确保已经和蓝牙耳机配对连接上.2.开启蓝牙信道AudioManager mAudioManager = (AudioManager)getSystemService(Contex ...
- ios语音输入崩溃
游戏中任何可以输入的地方,只要调用语音输入,必然会导致app崩溃,解决方法如下: ok, so essentially the gist of it is that siri wants gl con ...
- 给textarea添加背景图
给textarea添加背景图用的好也很有意思哦. <style type="text/css"> textarea{ background: url(img/carto ...
- HoloLens开发手记 - Unity之语音输入
对于HoloLens,语音输入是三大基本输入方式之一,广泛地运用在各种交互中.HoloLens上语音输入有三种形式,分别是: 语音命令 Voice Command 听写 Diction 语法识别 Gr ...
随机推荐
- odoo 8.0 多核启用
对于很多企业来说,随着时间的推移,用户量或者企业建点扩张,使用erp就会出现应用访问越来越慢的情况, 其实这种情况不但限于erp,只要是有数据量增长的互联网业务必然会遇到的,因为一开始的是就没有做好大 ...
- import schedule ImportError: No module named schedule
安装pip sudo apt-get install python-pip 安装schedule模块 pip install schedule PS: 如果已经安装pip,可能出现以下问题,按照提示重 ...
- PHP实现微信申请退款流程实例源码
https://www.jb51.net/article/136476.htm 目录 前期准备: 前面讲了怎么实现微信支付,详见博文:PHP实现微信支付(jsapi支付)流程 和ThinkPHP中实 ...
- 开户项目的sql查询语句备查
查询全国所有的券商名录 SELECT id,security,province,city,borough FROM t_security GROUP BY security ; 查询某个省份的所有券商 ...
- python基础--迭代器、生成器、内置函数、面向对象编程
迭代器:迭代器对象从集合的第一个元素开始访问,直到所有的元素都被访问完结束.迭代器只能往前不会后退 迭代:更新换代(重复)的过程,每次的迭代都必须基于上一次的结果 迭代器:迭代取值的工具 使用迭代器的 ...
- 2019.7.27 NOIP模拟测试9 反思总结
先来整理题目 T1题目大意:给出n个数字和一个质数作为模数,一个变量x初始值为1.进行m次操作,每次让x随机乘上n个数中的一个,问m次操作以后x的期望值. 答案一定可以用分数表示,输出分子乘分母逆元的 ...
- 2018-8-10-win10-uwp-禁止编译器优化代码
title author date CreateTime categories win10 uwp 禁止编译器优化代码 lindexi 2018-08-10 19:16:50 +0800 2018-2 ...
- Leetcode641.Design Circular Deque设计循环双端队列
设计实现双端队列. 你的实现需要支持以下操作: MyCircularDeque(k):构造函数,双端队列的大小为k. insertFront():将一个元素添加到双端队列头部. 如果操作成功返回 tr ...
- Django项目:CRM(客户关系管理系统)--01--01PerfectCRM基本配置ADMIN01
一.CRM项目需求 二.CRM项目新建 PerfectCRM crm
- web前端学习(二)html学习笔记部分(9)-- 响应式布局
1.2.23 响应式布局基础 1.2.23.1 响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...