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. VS2010调试小技巧

    在VS下做开发的时候我们进行调试的时候路径是这个样子的:http://localhost:端口号/项目名称/index.aspx 但是发布到服务器上面的时候却是这个样子的:http://www.xxx ...

  2. Oracle之事务

    一,oracle的事务: 是指对数据操作的一系列动作的统称.即:事务的任务便是使数据库从一种状态变换成为另一种状态,这不同于文件系统,它是数据库所特用的. 事务有四大特性(ACID): 1,原子性(a ...

  3. Querylayer(查询图层) - 浅谈

    Querylayer(查询图层)是通过 SQL 查询定义的图层或独立表.通过 Querylayer 可将空间信息和非空间信息都存储在DBMS 中,从而使这些信息可以轻松地整合到 ArcMap 中的各 ...

  4. java读取网页

    package cn.stat.p4.ipdemo; import java.io.IOException; import java.io.InputStreamReader; import java ...

  5. itext poi 学习之旅 （3）读取数据库信息并由excel展现出来

    DBConnection.java 连接数据库操作 package com.zkbj.poi; import java.sql.Connection; import java.sql.DriverMa ...

  6. linux 进程备忘

    进程间同步互斥方式: 1.管道pipe(亲属进程适用),命名管道fifopipe 2.信号量 3.共享内存配合信号量

  7. [转]Windows与Linux系统下的库文件介绍

    什么是库   库文件是一些预先编译好的函数的集合,那些函数都是按照可再使用的原则编写的.它们通常由一组互相关联的用来完成某项常见工作的函数构成,从本质上来说库是一种可执行代码的二进制形式,可以被操作系 ...

  8. 解决JavaScript中如何输出空格

    在写JS代码的时候,大家可以会发现这样现象:document.write("   1      2                3  ");结果: 1 2 3无论在输出的内容中什 ...

  9. mysql与java数据类型对应关系

  10. 转载：对#!/bin/sh的认识

    转载网址:http://blog.163.com/hashes@yeah/blog/static/16867631220101029847420/ 对#!/bin/sh的认识 第一次学shell编程, ...