• 主页

  • 投资

  • IT

    🔥
  • 设计

  • 销售

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

76 - 表单元素 - input标签 - 文本输入框使用

作者:

贺及楼

成为作者

更新日期:2025-02-20 11:57:35

  1. <input type="text" name="" id="" placeholder="请输入目标文字">
  2. input标签可以通过type属性值的不同,展示不同效果
  3. 属性值:
  4. text 文本框,用于输入单行文本
  5. password 密码框,用于输入密码
  6. radio 单选框,用于多选一
  7. checkbox 多选框,用于多选多
  8. file 文件选择,用于之后上传文件
  9. submit 提交按钮,用于提交
  10. reset 重置按钮,用于重置
  11. button 普通按钮,默认无功能,之后配合js添加功能
  12. placeholder 占位符,提示用户输入内容的文本
  13. readonly="readonly" 只读禁用

事件

  1. 1.onfocus input 获取到焦点时触发
  2. 2.onblur input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js
  3. 3.onchange input失去焦点并且它的value值发生变化时触发
  4. 4.onkeydown input中有键按住的时候执行一些代码
  5. 5.onkeyup input中有键抬起的时候触发的事件,在此事件触发之前一定触发了onkeydown事件
  6. 6.onclick 主要是用于 input type=button,当被点击时触发此事件
  7. 7.onselect input里的内容文本被选中后执行一段,只要选择了就会触发,不是非得全部选中
  8. 8.oninput inputvalue值发生变化时就会触发,不用等到失去焦点(与onchange的区别)
  9. 以上事件可以直接放到input的属性里,例如:
  10. <input type="text" οnfοcus="a();" οnblur="b()" οnchange="c();" οnkeydοwn="d();" />
  11. 也可以通过jsinput dom元素添加相应的事件,如:
  12. document.getElementByTagName('input').onfocus = function();