首页 > 软件开发 > HTML >

如何使 text 获得enter键后再响应

来源:互联网 2023-03-16 19:12:00 188

介绍如何使text的输入框在用户按下enter键后响应。pGn办公区 - 实用经验教程分享!

工具/原料

  • NotePad
  • chrome浏览器

方法/步骤

  • 1

    先找个文件夹,创建文件index.html。pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

  • 1相关内容非法爬取自百度经验
  • 2

    然后用可编辑文本文件的软件打开index.html,在index.html中加入如图内容。pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

  • 3

    接着在input中加入onkeydown和编写js代码,编辑后的index.html的内容如图。pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

  • 4

    这里解释一下响应的过程。pGn办公区 - 实用经验教程分享!

    在input标签中加入pGn办公区 - 实用经验教程分享!

    onkeydown="javascript:enterResponse(event)",pGn办公区 - 实用经验教程分享!

    onkeydown属性会监听文本框中的按键,每次有按键事件发生就会调用pGn办公区 - 实用经验教程分享!

    enterResponse(event)函数。pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

  • 5

    触发onkeydown事件后,enterResponse(event)函数被调用。pGn办公区 - 实用经验教程分享!

    在enterResponse(event)中,通过对pGn办公区 - 实用经验教程分享!

    event.keyCode的值进行判断,如果event.keyCode==13(回车键),就响应事件,否则不响应。pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

  • 6

    用浏览器打开index.html文件,效果如图。pGn办公区 - 实用经验教程分享!

    当在文本框按下回车键时,有弹出框弹出,说明在输入框下按enter键后响应成功。pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

    如何使 text 获得enter键后再响应pGn办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!pGn办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码