首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端下载文件的5种方法的对比

form表单提交 这是以前常使用的传统方式,毕竟那个年代,没那么多好用的新特性呀。...道理也很简单,为一个下载按钮添加 click事件点击时动态生成一个表单,利用表单提交的功能来实现文件的下载(实际上表单提交就是发送一个请求) 来看下如何生成一个表单,生成怎么样的一个表单: /**...属性,简单的一句代码即可区分 const isSupport = 'download' in document.createElement('a'); 对于跨域下不能下载可浏览的文件,其实可以跟后端协商好...该对象兼容性良好,需要注意的是 IE10以下不支持。...优点 能解决不能直接下载浏览器可浏览的文件 可设置header,也就可添加鉴权信息 缺点 兼容性问题,IE10以下不可用;Safari浏览器注意使用 利用base64 这里的用法跟上面用 Blob大同小异

6.9K63

Layui前端框架中的Button添加Click事件

IE和w3c,firefox浏览器区别: 当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。...但是W3C浏览器,如Firefox下就需要注意了,button标签按钮提交表单,而input标签type属性为button不会对表单进行任何操作。...第一种点击事件场景(动态元素)   这种场景适合于动态创建元素后,点击事件。   ...这里的点击事件是指单纯的点击事件,而不是提交事件,或者是数据表格中内嵌的button,对于这两者,layui是有lay-submit和lay-event这个属性进行支持的,所以这里只能使用最原始的js和...总结   web开发中,对按钮的操作事件比较频繁,搞清楚使用方法,才能更好的解决实际需求。 另外,欢迎加入学习沟通群~

4.9K20

阻止a标签的默认事件及延伸

(2)当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作,那么事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是正常的事件传播流中发生的。...如链接,提交按钮等。...当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。...//仅仅是HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

2.4K60

JavaScript基础学习--01热身

3、简化代码,当同一段代码出现两次以上的时候,考虑写成函数形式 4、button按钮最好用a标签制作,减少input(submit),不必要的表单提交 5、js中变量的合理利用 6、href="javascript...:鼠标事件、键盘事件、系统事件表单事件,元素添加事件的方法:(obj.事件名) 10、函数:不会主动执行,调用方法:直接调用abc();  事件调用 元素.事件名=函数名/匿名函数 11、获取元素的方法...var aLi = [ document | obj ].getElementsByTagName('标签名');               (1)获取的时候是以数组的形式给出,所以即使该元素只有一个...(2)是动态方法(开头处寻找元素,中间动态创建元素,末尾输出元素,得到的结果是所有的),区于getElementById,是静态方法,若在寻找元素的行以前没有找到元素,后面重新创建元素将会找不到。...H5新增方法, 缺陷:1、兼容性不太好(IE8以下不兼容)。2、非动态实时(动态创建的元素不会被选中)。3、使用包含选择器时,会包含祖先元素在内。

84190

firefox中用js提交表单

document.forms.from.submit(); document.form.sumbit(); document.form.submit.click(); this.form.submit(); 以上几种形式的 js 表单提交...firefox 浏览器下是不起作用的 2....” # 当提交按钮的 name 或者 id 为 submit 时候,用 js 提交表单表单名.submit () 时候会报一个错误,提示对象不支持此属性或办法。...因为” 表单名.submit () 提交” 这种写法本身就是不符合 W3C 标准的规定的, IE 下没有报错因为 IE 支持这种写法,但是如果在 FF 下就会报错,要写成”document.getElementById...我项目中发现 与 得出的效果截然不同, 谁能告诉我这两着有合不同 我又如何能用图片来替代原有的提交按钮 是说这是一个按钮,它的是一个提交按钮。当点击它时,它会自动将它所在的表单进行提交.

7.1K20

浅谈反馈式按钮的设计与实现

表单类 一旦表单缺少提交的信息,提交按钮或者表单会抖动几下,向用户强调目前这个表单是错误的,中断了提交步骤。 为什么需要反馈?...曾经一起合作的设计师向我提出过如下图的交互效果: 我粗略的看了一下网站源码,用户的每次鼠标点击操作, a 标签里都会有 JS 操作 DOM 的事件。...原理是往标签内 Append 一个 DIV ,而且点击时还会再往这 DIV 里增加 3-4 个标签,才能实现这个涟漪动画。...IE10 以下不兼容 CSS3 的镜像渐变,不用考虑。...IE10 / 11、火狐、chrome都无问题,本来还有点高兴,结果有一天用第三方浏览器「360 、QQ 浏览器等」打开时,发现在特定情况下,也就是扩散的颜色如果不同于背景色,就会出现下面的状况: 可以看到

1.2K70

手机端页面项目中遇到的一些问题及解决办法

(1) 设置 html body 的高度为百分比时,margin-bottom safari 里失效 (2) 直接 padding 代替 margin 4.Ios 绑定点击事件不执行?...6.Jq 对 a 标签点击事件不生效? 出现这种情况的原因不明,有的朋友解释:我们平时都是点击的 A 标签中的文字了。...所以要想用 JS 模拟点击 A 标签事件,就得先往 A 标签中的文字添加能被 JS 捕获的元素,然后再用 JS 模拟点击该元素即可。但是我觉得不合理,虽然找不到原因但是解决办法还是有的。...类似于 history.go(-1); 而 safari(包括桌面版和 ipad 版)的后退按钮则不会刷新页面,也不会提交数据申请。...[type=checkbox]::-ms-check { display:none; } //3.禁用 pc 端表单输入框默认清除按钮,::-ms-clear 修改清除按钮,设置隐藏并使用背景图片来修饰

3.4K30

JavaScript 表单处理

提交表单 通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据跳转到指定页面。...,也就是说,并不一定非要点击submit按钮才能提交。...因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。...,立刻禁用点击按钮;第二种就是提交之后取消后续的表单提交操作。...重置表单 用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了。因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。

4.8K101

【Web APIs】JavaScript 事件基础 ① ( JavaScript 事件简介 | “ 事件 “ 概念 | “ 事件 “ 三要素 - 事件事件 事件处理程序 | 事件类型 )

, 并针对该行为触发对应的动作 ; " 事件 " 是 用户 与 HTML 网页 交互时触发的 , 如 : 鼠标点击 , 鼠标移动 , 键盘按键 , 表单提交 , 文件加载 等 动作 ; " 事件处理程序..." ( Event Handlers ) 是 JavaScript 脚本中处理 " 事件 " 的函数 , 该函数中可以针对用户的 不同的动作 做出不同的响应 ; 在网页中 , 每个 HTML 标签元素...Source : 触发 " 事件 " 的 HTML 标签元素 , 如 : 按钮、链接、表单域 ; 事件源 可以是任何能接收事件的 HTML 元素或者浏览器窗口本身 ; <button id="myButton...: 鼠标<em>事件</em> : 鼠标<em>点击</em> , 鼠标移动 , 鼠标抬起 , 鼠标按下 , 鼠标悬停 ; 键盘<em>事件</em> : 键盘按下 , 按键抬起 , 键盘输入 ; <em>表单</em><em>事件</em> : <em>表单</em><em>提交</em>、<em>表单</em>输入 ; 文档 / 窗口<em>事件</em>...为 Click me <em>标签</em>设置<em>点击</em><em>事件</em> , 这是 " 事件源 " ; 事件类型为 click 类型 , 是 点击事件 ; 事件处理程序是下面的函数

7810

怎么用css属性屏蔽鼠标事件(鼠标点击可穿透上层元素)

现在的情况是只有点击日期内容框空白区域时,才会响应点击事件显示下拉日期菜单。...而这个icon图标我是绝对定位到日期内容框中的,它的图层维度是高于日期内容框的,点击icon图标时是不会响应点击事件的。我的第一个反应是事件点击穿透,但是该怎么实现?...懵逼的我一顿操作猛如虎,开启面向谷歌编程大法… 事实证明访问外国网站很重要,谷歌精准 > 百度精准,再次吐槽百度的广告… 为了解决被icon图标遮盖住的内容框区域也能响应点击事件,可以使用poniter-events...再关注下poniter-events的兼容情况: 桌面浏览器 IE11+(IE6~IE10均不支持) Firefox:3.6+ Chrome:4.0+ Safari:6.0 Opera:15.0...考虑到none值的作用,应该可以取消掉事件点击行为。比如:使a标签链接不可点击、避免按钮多次点击表单重复提交等。除此以外,肯定还有很多其他应用,可以通过属性值去发掘。

1.7K20

表单提交中的input、button、submit的区别

"> 其中点击按钮后的url变为?...再加上它的样式难以定制、不可作为其他标签的容器, 所以建议不要用input作为表单提交按钮。 注意:input的type属性还可以是button,这时它只是一个按钮,不会引发表单提交。...IE浏览器的兼容,请记住button[type]IE中的默认值是button,这意味着它只是一个按钮而不会引发表单提交。   ...提交表单时,value会被作为表单数据提交给服务器。 IE中,甚至会把button开始与结束标签之间的内容作为name对应的值提交给服务器。...button和input的相似还不止于此,button也可以设置type=reset,此时点击按钮会导致表单被重置(这还挺有用的)。

3K100

第59节:Java中的html和css语言

sex 表单标签: 输入标签 input 文本框 text 密码框 password 单选框 radio 复选框 checkbox 隐藏字段 hidden 提交按钮 submit 重置按钮...reset 按钮 button 按钮 button 图像 image 选择标签 子项标签 多行文本框 ?...表单 表单提交:明确提交方式,指定method属性值,默认为get,form表单中的action属性值,是指定表单数据提交的目的地....get和post get提交的数据会显示地址栏中,而post不会,使用get会对敏感信息不安全. get的提交数据体积有限,而post可以提交大体积的数据. get将提交数据封装到了http消息头的第一行...,而post将提交的数据封装到消息头后 提交表单建议使用post 头标签标签放在头部分之间 用于显示浏览器的标题栏内容 href 属性和

1.7K20

【Java 进阶篇】深入浅出:JQuery 事件绑定的奇妙世界

表单事件:submit(表单提交)、change(表单元素值改变)、focus(表单元素获得焦点)等。 窗口事件:resize(窗口大小改变)、scroll(滚动条滚动)等。...然后,通过 off 方法,我们页面加载后的某个时刻解绑了按钮点击事件实际应用中,动态事件解绑通常与某些条件或用户行为相关,例如定时器触发、异步操作完成后等情况。...通过 setTimeout 函数,我们一定时间后再次将背景颜色还原,实现了点击时的瞬间特效。 案例二:表单验证 表单验证是 Web 开发中常见的需求之一。...event.preventDefault(); // 进行表单提交前的其他操作 alert("表单验证通过,可以提交!")...表单提交时,通过 submit 事件阻止默认的提交行为,执行其他操作(比如异步验证、数据提交等)。 结语:奇妙世界的探索 通过本文的学习,我们深入了解了 JQuery 事件绑定的基本原理和用法。

16210

HTML编码规范建议

[建议] CSS 可以实现相同需求的情况下不得使用表格进行布局。 解释: 兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外,如多列复杂表单。...示例: [建议] html 标签上设置正确的 lang 属性。...解释: button 元素的默认 type 为 submit,如果被置于 form 元素中,点击后将导致表单提交。为显示区分其作用方便理解,必须给出 type 属性。... [建议] 当使用 JavaScript 进行表单提交时,如果条件允许,应使原生提交功能正常工作。...解释: 当浏览器 JS 运行错误或关闭 JS 时,提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时,提交仍可继续进行。

2.7K30

js中的事件(event)

; 以下是常用的事件对象的属性: var x =e.clientX,y=e.clientY;所有浏览器都支持,相当于浏览器中鼠标的坐标; var x=e.pageX,y = e.pageY;ie8或以下不支持...a0标签的时候,他就会有一个跳转行为;当你在网页上点击鼠标右键的时候会出现一个右键菜单;当你一个form表单点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮的时候,页面的滚动条会滚动等等.../在这里可以加一些代码,实现自定义的右键菜单; return false //系统自带的右键菜单就失效了 } Form.onsubmit = function(){return false;}//这样表单就不会产生提交行为了...需求:如下的HTML代码中,当你点击这个页面中的一个元素时,弹出这个元素对应的标签名; outer inner <...W3C的标准是同一事件上,先绑定的方法先执行,并且不能重复绑定同一个方法同一个事件上,但是IE6、7、8中,如果绑定的方法少于9个,执行的顺序是相反的,超过9个,执行顺序就是混乱的,这些IE中的问题都是比较严重的

6.7K30

前端学习(2)~html标签讲解(二)

这个属性框架集合中同样适用。 颜色这个属性IE浏览器中生效,但是google浏览器中无效,不知道为啥。...hidden:隐藏框,表单中包含不希望用户看见的信息 button:普通按钮,结合js代码进行使用。 submit:提交按钮,传送当前表单的数据给服务器或其他程序处理。...这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。...reset:重置按钮,清空当前表单的内容,并设置为最初的默认值 image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。 file:文件选择框。...用了这个属性之后,google浏览器中,光标点不进去;IE浏览器中,光标可以点进去,但是文字不能编辑。 disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。

2.4K10

(续)很久很久以前学的,16个HTML笔记

一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据以及数据提交到服务器。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。...表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。 ?...表单标签: 属性: 属性描述action规定向何处提交表单的地址(URL)(提交页面)。autocomplete规定浏览器应该自动完成表单(默认:开启)。...Action属性: Action属性定义提交表单时执行的动作。通常表单会被提交到web服务器上的某个PHP文件。若action被省略,则action会被设置为当前页面。...表单的元素 表单元素指的是不同类型的 input 元素、复选框、单选按钮提交按钮等等。 元素是最重要的表单元素。

2.7K30
领券