By default, Inputs will push input events into the stream. This lesson shows you how to use map to convert the input event into the text you actually want.

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script>

  <title>JS Bin</title>

</head>

<body>

<input type="text" id="input">

</body>

</html>
const input = document.querySelector('#input');

const input$ = Observable.fromEvent(input, 'input')

  .map(event => event.target.value);

input$

  .subscribe((x)=> console.log(x));

[RxJS] Getting Input Text with Map的更多相关文章

  1. input:text 的value 和 attribute('value') 不是一回事

    如题,input:text 当手工输入字符改变其值时,两者就不一样了. 要获得手工输入,不要用attribute('value'), 直接使用value: function getbyid(id){ ...

  2. jquery循环table中tbody的tr中input:text，将值进行拼接传入控制器并返回状态和描述

    引用jquery $(function(){ $("#按钮id").click(function(){ var nums="";//变量 $("#ta ...

  3. input text输完自动跳到下一个

    应用场景: 短信验证码输入 效果: input输入框,输入完以后自动跳转到下一个 思路: 四个输入框 进入聚焦到第一个输入框 第一个输入框输完一个字符后自动聚焦到下一个输入框 1.四个输入框 < ...

  4. RobotFramework自动化测试框架-移动手机自动化测试Input Text和Click Button关键字的使用

    Input Text和Click Button Input Text 关键字一般用来给输入框进行输入操作,该关键字接收两个参数[ locator | text ]. 示例1:启动安卓手机上一个APP的 ...

  5. input(Text)控件作为填空输入,但运行后,有曾经输入的记录显示,用autocomplete="off"解决

    系统中,有设计填空题,原来程序中,用input(Text)控件,   <input type="text" name="NO<%=rs("id&qu ...

  6. rxswift-self.usernameTF.rx.text.orEmpty.map

    self.usernameTF.rx.text.orEmpty.map 一堆类型转化+数据处理的操作 self.usernameTF.rx:将textfiled用Reactive封装: .text:监 ...

  7. input submit标签的高度和宽度与input text的差异

    <input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值. <input type="s ...

  8. js 获取table tr td内的select 和input text

    $("#TableList tr").each(function () {                //for (var i = 1; i <= AM_index; i ...

  9. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

随机推荐

  1. Java基础知识强化64：基本类型包装类的引入

    1. 基本类型包装类概述 (1)将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法操作该数据. (2)常用的操作的之一:用于基本数据类型与字符串之间的转换. (3)基本类型和包装类的对应 ...

  2. JavaScripts学习日记——DOM SAX JAXP DEMO4J XPath

    今日关键词: XML解析器 DOM SAX JAXP DEMO4J XPath XML解析器 1.解析器概述 什么是解析器 XML是保存数据的文件,XML中保存的数据也需要被程序读取然后使用.那么程序 ...

  3. 网页调用QQ聊天

    把下面的复制到地址栏里,QQ号为你要聊天的人的qq号,如果你没有登录你自己的qq,首先会调出qq登录窗体. tencent://message/?uin=QQ号­

  4. 如何启用第三方Chrome插件

    如何安装第三方Chrome插件,先下载扩展名为CRX的文件到本地,提醒一下,不能直接在该网站下打开安装,如果安装失败,可以找到此CRX文件拖入到扩展页安装就可以了! 可是,当我们通过本地安装了第三方C ...

  5. java优势

    跨平台,只要有JVM(Java虚拟机)的操作系统就可以运行JAVA程序: 安全: 弃用危险的指针: 自动内在管理机制,垃圾回收机制,由垃圾回收器回收,减轻程序负担,也避免了手动回收的危险性: 完全面向 ...

  6. 自己手动绿色化MyEclipse

    绿化过程因每个人的文件存放路径不同而不同 首先打开你解压的MyEclipse文件,或者以前安装的MyEclipse重装系统后不能用,打开到这里:记住路径,比如我的是:D:\MyEclipse 我们打开 ...

  7. sql_autoload_register() 函数 和__autoload() 的区别

    1:__autoload($class) 因为是一个函数,所以只能定义一次,使用多个会冲突报错;而 sql_autoload_register('function') 可定义多个,它有效地创建一个队列 ...

  8. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

  9. 仿校内textarea输入框字数限制效果

    这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...

  10. NGINX和PHP之间的环境变量传递

    昨天遇到的,想将IP访问转换成域名访问.则NGINX需要将相关的变量转换后传递给PHP. 网上有一系统的方法: 前面讲过该不该把信息写在服务器配置文件里?.通过php扩展hidef来define常量, ...