3-3 编程练习

完善下面的代码，在input框中输入内容的时候同样显示在下面的p标签中

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>习题</title>

</head>

<body>

    <input type="text" value="">

    <p></p>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>

    //此处写代码

    </script>

</body>

</html>

任务

1、选中input元素

2、使用键盘事件，将input框中的内容添加到p标签中

任务提示

val()方法返回或者设置被选元素的值，获取输入框中的内容可以使用val()

参考代码

$($).ready(function () {

    $('input').keyup(function () {

        $('p').text($('input').val());

    })

})

3-3 编程练习：jQuery键盘事件案例的更多相关文章

  1. jquery键盘事件全记录

    很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

  2. js进阶 12-4 jquery键盘事件如何使用

    js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...

  3. jquery键盘事件总结

    在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...

  4. jquery 键盘事件的使用方法详解

    转自:https://www.jb51.net/article/123579.htm jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); ...

  5. js/jquery键盘事件及keycode大全

    js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...

  6. jquery键盘事件

    场景:当我们遇到onclick按钮事件时需要按回车执行时就用到了键盘监听事件 例如:<button id="sign_in_button" class="btn b ...

  7. javascript/jquery键盘事件介绍

    一.首先需要知道的是:1.keydown()keydown事件会在键盘按下时触发.2.keyup()keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件3.keypress()keypres ...

  8. JQUERY 键盘事件

    一 一.首先需要知道的是: 1.keydown()keydown 事件会在键盘按下时触发. 2.keypress()keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键. 3. ...

  9. jQuery键盘事件绑定Enter键

    <script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mo ...

随机推荐

  1. CodeForces788B 欧拉路

    B. Weird journey time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. 【ZJOI2018 Round2游记】

    在主场作为高三退役选手要去听一些奇怪的宣讲 看看有没有PY的机会 语文考试考到一半溜出来 ZJU先上 开始挑衅 很勇啊 THU的校友 然而这些都离我太过遥远 最后PY了一波 获得了鼓励(并不) 最后的 ...

  3. Spring Cloud体系实现标签路由

    如果你正在使用Spring Cloud体系,在实际使用过程中正遇到以下问题,可以阅读本文章的内容作为后续你解决这些问题的参考,文章内容不保证无错,请务必仔细思考之后再进行实践. 问题: 1,本地连上开 ...

  4. Analyzing Storage Performance using the Windows Performance Analysis ToolKit (WPT)

    https://blogs.technet.microsoft.com/robertsmith/2012/02/07/analyzing-storage-performance-using-the-w ...

  5. MongoDB小结23 - 索引简介

    MongoDB中的索引,可以看作是书的目录. 想象一下给你一本没有目录的书,然后让你去查询指定内容,我只想说,我不是电脑,我很蛋疼! 让你翻没有目录的书,就跟让电脑查询没有索引的集合一样,从头查询到尾 ...

  6. 在 IIS 中承载 WCF 服务

    本主题概述了创建 Internet 信息服务 (IIS) 中承载的 Windows Communication Foundation (WCF) 服务所需的基本步骤. 本主题假设您熟悉 IIS 且了解 ...

  7. Angular CLI: 1.6.7 入门

    当你使用npm或者yarn也安装不了angular-cli时,请使用淘宝镜像. Step1 npm i -g cnpm --registry=https://registry.npm.taobao.o ...

  8. 二叉查找树（BST）

    二叉查找树(BST) 二叉查找树(Binary Search Tree)又叫二叉排序树(Binary Sort Tree),它是一种数据结构,支持多种动态集合操作,如 Search.Insert.De ...

  9. 找了两个node+vue-cli+mogodb的小项目学学

    实现的博客系统,自己抽时间搭建看看 https://www.cnblogs.com/yesyes/p/7188331.html https://github.com/chaohangz/vueBlog

  10. Project Euler problem 68

    题意须要注意的一点就是, 序列是从外层最小的那个位置顺时针转一圈得来的.而且要求10在内圈 所以,这题暴力的话,假定最上面那个点一定是第一个点,算下和更新下即可. #include <iostr ...