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. Log4Qt使用（三）在DailyRollingFileAppender类中增加属性mMaxBackupIndex

    在Log4Qt中存在一个比较大的问题,当使用 DailyRollingFileAppender对日志进行输出时,会无限输出文件,也就是说,当系统运行很久时,日志文件有可能很大,大到无法想象.因此,很多 ...

  2. gcc -L -l的使用

    -l参数就是用来指定程序要链接的库,-l参数紧接着就是库名,那么库名跟真正的库文件名有什么关系呢?就拿数学库来说,他的库名是m,他的库文件名是libm.so,很容易看出,把库文件名的头lib和尾.so ...

  3. Asp.net +Jquery-uploadify多文件上传

    页面代码如下: <link href="JS/jquery.uploadify/uploadify.css" rel="stylesheet" type= ...

  4. nginx反向代理nginx，RealServer日志打印真实ip

    title: nginx反向代理nginx,RealServer日志打印真实ip date: 2016-05-11 19:15:37 tags: --- nginx反向代理nginx,RealServ ...

  5. 从html字符串中获取div内容---jquery

    思考的问题: 怎么在一个网页的div中嵌套另外的网页(不使用inclue,iframe和frame,不使用他们的原因,include只能嵌套静态网页,iframe对网络爬虫影响,frame嵌套网页无法 ...

  6. iOS分享 - AFNetworking之多图片/文件上传

    在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...

  7. 刚安装的ios app 会带有教你功能使用的特效说明 做法

    这个功能使用说明是每次app更新或者第一次安装都需要显示的.你可以给每个需要显示的说明界面设置一个BOOL变量控制它是否显示.在applicationDidFinishLaunching的函数中判断a ...

  8. C#构造函数使用

    作用:帮助我们初始化对像(给对像的每个属性依次的赋值) 构造函数是一个特殊的方法 1.构造函数没有返回值,连void也不能写 2.构造函数名称要和类名一样 3.创建对像时会执行构造函数 4.构造函数可 ...

  9. MongoDB在win7下安装配置

    1.在MongoDB官网下载最新版本,并且安装 2.解压后在MongoDB文件目录下创建data文件夹和log文件夹,并且在log文件夹中新建mongodb.log文件 3.新建一个配置文件mongo ...

  10. js深入理解"闭包"

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...