h5那些关于交互的属性

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5那些关于交互的属性相关的知识,希望对你有一定的参考价值。

tabindex

技术图片

作用:配合focus实现键盘快捷访问。
默认可focus元素(无需设置tabindex):a, button, input, select, textarea, area, legend, label

tabindex取值(0至32767)

  1. 0
    可以使一个元素按自然顺序出现在 tab 键序中
  2. 负值
    可以被鼠标或者JS focus,同时能够响应focus事件。但是,却不能被键盘focus。

autofocus

作用:使input自动获取焦点,当页面加载时 input 元素应该自动获得焦点
用法:autofocus = "autofocus"
注:IE 9 及之前的版本不支持

contenteditable

作用:是否可编辑元素的内容
用法:contenteditable = "true"

<ul contenteditable="true">
    <li>悼念遇难香港同胞 </li>
    <li>深圳特区30周年</li>
    <li>伊春空难</li>
</ul>

autocomplete

用法:autocomplete="on"

accessKey 键盘快捷方式

作用:可设置或返回访问一个按钮的键盘按键
Alt + accessKey 为拥有指定快捷键的元素赋予焦点  

提示: 各种浏览器下accesskey快捷键的使用方法:
    IE浏览器
      按住Alt键,点击accesskey定义的快捷键(焦点将移动到链接),再按回车.
    FireFox浏览器
      按住Alt+Shift键,点击accesskey定义的快捷键.
    Chrome浏览器
      按住Alt键,点击accesskey定义的快捷键.
    Opera浏览器
      按住Shift键,点击esc,出现本页定义的accesskey快捷键列表可供选择.
    Safari浏览器
      按住Alt键,点击accesskey定义的快捷键.

readonly

作用:规定输入字段为只读
用法:readonly="readonly"
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本

readonly 与 disabled区别

  1. Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效(readonly接受值更改可以回传,disable接受改但不回传数据)
  2. 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效

title

作用:在鼠标移到元素上时显示一段工具提示文本(tooltip text)
用法:<element title="value">

alt

作用:指定图像不能正常显示(网速慢、图片链接错误)后显示的替换文本
用法:<img src="compman.gif" alt="common">

以上是关于h5那些关于交互的属性的主要内容,如果未能解决你的问题,请参考以下文章

关于原生android与H5交互的方法

关于JS交互--调用h5页面,点击页面的按钮,分享到微信朋友圈,好友

Android WebView和H5交互总结

H5与Android之间的交互

iOS WKWebView与H5交互,JS调OC传值、OC调JS传值、进度条加载等(干货满满)

关于App与H5交互-获取不同浏览器以及版本号