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. 61. mybatic insert异常：BindingException: Parameter 'name' not found【从零开始学Spring B】

    mybatic insert异常:BindingException: Parameter 'name' not found [从零开始学习Spirng Boot-常见异常汇总] 异常信息如下: nes ...

  2. AndroidSweetSheet：ViewPager的实现（2）

     AndroidSweetSheet:ViewPager的实现(2) 附录文章9说明了AndroidSweetSheet典型的列表样式实现,本文写一个例子,说明AndroidSweetSheet以 ...

  3. JS前端取得并解析后台服务器返回的JSON数据的方法

    摘要:主要介绍:使用eval函数解析JSON数据:$.getJSON()方法获得服务器返回的JSON数据 JavaScript eval() 函数 eval(string) 函数可计算某个字符串,并执 ...

  4. Spring3.2+mybatis3.2+Struts2.3整合配置文件大全

    0.配置文件目录 1.Spring配置 applicationContext-dao.xml <?xml version="1.0" encoding="UTF-8 ...

  5. HDU 5876 补图 单源 最短路

    ---恢复内容开始--- Sparse Graph Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (J ...

  6. CodeForces - 812C Sagheer and Nubian Market 二分

    On his trip to Luxor and Aswan, Sagheer went to a Nubian market to buy some souvenirs for his friend ...

  7. 【进击后端】mongodb入门

    环境:ubuntu 重要字:数据库,集合,记录,字段 api地址:https://docs.mongodb.com/manual/reference/method/db.collection.upda ...

  8. Servlet开发(2)

    Jsp&Servlet用户登录功能实现(采用MVC模式) 我们使用Jsp&Servlet开发一个用户登录功能的小项目(麻雀大小,但是五脏俱全呦,关键是技术问题!). 数据库:mysql ...

  9. Ubuntu 16.04 GNOME下解决Sublime Text3中文输入（ibus）（转）

    解决方法: 1.进入Sublime Text3插件管理文件夹 cd ~/.config/sublime-text-3/Packages 2.获取InputHelper插件 git clone http ...

  10. Ubuntu 16.04安装SoapUI工具进行接口测试（Web Service/WSDL/RESTfull）

    SoapUI是一个跨平台接口测试工具,官方提供开源版本和商业版本.可以用来测试WSDL/RESTfull等接口. 替代的工具有JMeter. 一般用于WSDL的接口测试比较多,基于XML的形式,且这类 ...