首页
学习
活动
专区
圈层
工具
发布

『表单开发』一次即通关的5个技巧

解决方法虽然很简单,但这却是开发最容易忽略的,也是tapd上最经常见的缺陷问题。...导致问题:用户在编辑某一条数据后,再点击新增,会发现新增表单里面的内容是上一条编辑内容的数据。...解决方法: 一是避免在关闭窗口时恢复为默认数据 二是使用 resetFields将所有字段值重置为初始值并移除校验结果(但不能解决点编辑后再点新增时,恢复为默认数据) 5....不小心点击关闭页面时,要提示让用户确认 业务场景:当用户在填写一个长表单时,手误点了关闭页面或者点击去到其他页面。 导致问题:用户花时间填写的表单数据会丢失,用户又要重新填一遍。用户体验大大降低。...value) {                // 当弹窗关闭不涉及表单时,清除事件                window.onbeforeunload = null;

94920

2019年最全的UI设计之输入字段剖析

它们通常出现在表单和对话框中。 本文将为大家揭秘最佳的输入字段设计技巧以及元素,一起来看看吧。 ? 输入字段包含以下6个部分: 1. 容器字段 2. 前导图标(可选元素) 3. 标签文本 4....关闭图标(可选元素) 6. 帮助文本 / 错误文本(可选元素) 1. 容器字段 容器的大小应与用户预期输入成正比 在单行字段中,当光标到达右侧字段边缘时,比输入行长的文本会自动向左滚动。...用户眼睛隐藏的文本越多,他们验证输入的难度就越大。理想情况下,用户应该看到所有输入内容,而无需滚动输入字段。 ? 左:容器太紧。...此原则的唯一例外是智能默认值。智能默认设置可以使用户更快更准确地完成表单。例如,根据用户的地理位置数据预先选择用户的国家/地区。但是,你仍应谨慎使用这些,因为用户倾向于保留预先选择的字段。 5....关闭图标 关闭图标是一个具有强大功能的小图标 - 它可以帮助降低交互成本。 '清晰'的关闭图标 显示此图标可帮助用户在一次点击中删除字段中的文本。 ? 注意容器右侧的“交叉”图标。

3.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AJAX如何处理书签和翻页按扭(上)

    AJAX 应用程序把自己注册为历史浏览的监听器,当用户使用 “前进”“回退”按钮来浏览时,历史浏览时间被触发,调用 add() 方法来提供给浏览器新的地址,并保存历史数据。...在普通的网页中,当用户浏览到一个新的网址,浏览器卸载并清除当前网页所有的程序和JavaScript状态,如果用户返回时,所有的数据都丢失了。...我们起初通过使用隐藏的表单字段来实现,因为浏览器自动保存一个表单中字段值,甚至用户离开网页的时候也如此。...可以选择附加到这个事件上: 上面用到的Debug() 是一个工具方法,用来简单的把消息打印到网页上。...注意:historyData 并不随书签一起持续化,当浏览器关闭,浏览器缓存被清除和用户清除历史记录的时候,他也就消失了。

    1.2K30

    PHP+Ajax+Canvas

    基于增删改查的划分方式, 了解, 现在基本只用get和post了) 前端可以向后台请求的几种方式 常用请求方式 1、 ajax发送请求 2、 表单提交发送请求 3、 a标签的href跳转发送请求 资源型请求...] = $row; } 关闭数据库连接 mysqli_close( $link ) 6-cookie 和 Session cookie 浏览器端存储数据的容器 操作cookie的常用方法,及cookie...浏览器端, 清空浏览器缓存也可以清除登录状态, 清除了 cookie 7-原生Ajax(XMLhttpRequest对象) 发送 get 请求 var xhr = new XMLHttpRequest(...准备数据 4. 将模板和数据相结合 template('模板id', 数据对象); 必须是对象, 在模板中可以使用数据对象中的所有属性 语法: 1....4-表单重置:$('#form')[0].reset(); reset() 是 dom 对象的方法 5-事件委托的使用场景: (1) 动态渲染的元素, 需要通过事件委托注册 (2) 给按钮,

    4.2K30

    测试需求平台11-产品管理交互Acro必要组件掌握

    、通知; 行动按钮(可选):通知类弹窗一般只包含两个按钮,确认或信息录入弹窗一般为两个按钮(一般是“确定、取消”); 关闭按钮 (可选):点击可关闭弹窗; 黑色蒙层(必有):黑色蒙层覆盖全页面,蒙层下方的页面内容不响应滚动和点击...Form 具有数据收集、校验和提交功能的表单,内部组件包含复选框、单选框、输入框、下拉选择框等,根据需要进行自由基础组件组合扩展, 基础用法 一个比较简单由input、checkbox、button...组成的表单,在提交时候获取表单项值 例子代码参考如下: 为表单主包包裹, :mode绑定组值对象 为子项,filed(数据项必填)表单元素在数据对象中的path...,不应包含完成任务所需的重要信息; 前缀图标:用于描述输入框中可输入的内容及格式(如:电话、日期图标); 后缀图标:根据不同场景具有多样的功能,常用场景如下: 错误提示,可与辅助文字中的错误提示结合出现...; 内容清除按钮,可点击一键清除输入框中已输入的内容; 语音输入按钮,点击触发语音输入功能; 密码隐藏按钮; 前后置标签 :在输入框前后添加的预置内容,常见标签有网址前后信息和计数单位.

    1.1K20

    用WINSOCK发送Email,调用FTP

    PeekData(Data,Type,maxLen) 用缓冲中的内容填充变量, 但不清空缓冲. SendData(Data) 发送数据到远程计算机....this.object.GetData(@lc_buffer) 我们运行 GetData 方法, 给它一个要接收缓冲中的数据的变量名引用 (@). 该方法也会清除 Winsock 的缓冲....在该表单上, 我们选择或输入想与之聊天的用户. 在得到确认后, 生 成的注册用 RLOCK 锁住, 因此, 没有其它终端可以再使用它. 然后, 让表单不可见并显示 ON_LINE 表单....在 ON_LINE 表单的 TIMER1 中计时器 5 秒钟触发一次, 运行 USERS 方法. 最后的运行遍历表试图锁定每一个注册....要关闭当前的对话, 要做的所有事情就是关闭 CHAT 窗口. 另一个机器上的窗口也会自动关闭. 在这一点上, ON_CHAT 变量已经包含了 .F. 值, 并且可以接收新的聊天请求.

    1.3K20

    扒一扒使用boostrap-fileinput上传插件遇到的坑,Bootstrap-fileinput上传插件的使用详解,「建议收藏」

    由于公司项目的需求,需要实现动植物名录的添加,包括姓名等信息和图片等,需要使用bootstrap-fileinput的上传插件,在提交添加界面表单数据的同时上传一张或者多张图片,并将上传的图片保存到本地磁盘中...我查了很多办法好像都没办法,后来改变思路:还是自己用js触发提交表单,只是先将表单其他数据传到后台保存返回数据库id,然后通过$(‘#add_bachPic’).fileinput(‘upload’);...触发提交文件上传,并传递额外参数id,最后根据传递的额外参数,修改相应的实体类中的字段,将上传的图片的名字,修改并保存数据库的pictureurl字段中!...$("#btn_insect_add").click(function () { $(".insect").val("") //根据类名移除上一次增昆虫名录时的填写的所有的内容。...中,实现的实路是,先点击提交,通过ajax提交表单的信息,在提交成功的success响应方法中,触发图片上传的方法。

    5.8K20

    Ext常用组件

    表单是客户端和服务器交互的一种重要方式,Ext表单控件在界面体验效果的美观度及功能的全面性上都有着首屈一指的影响力,表面上,表单控件只是添加了一些 CSS样式,但它在数据校验方面非常灵活。...默认为true,如果为false,则不显示右上角的关闭按钮 msg 消息的内容 title 标题 fn 关闭弹出框后执行的函数 icon 弹出框内容前面的图标,取值为:Ext.MessageBox.INFO...1.2.3 表单提交 表单最重要的功能就是向后台提交数据,下面通过一个注册功能演示Ext表单提交,Ext代码如下所示。...某些情况下,树的数据并不多,为了减少数据量而使用Ajax访问后台并不合适;每个节点都使用 New生成又过于麻烦。...​训练技能点​ Ø Ext表单控件 ​需求说明​ 在任务2的基础上完成注册功能,当用户点击【注册】按钮后,提交到后台程序并保存到数据库,保存成功或失败给出提示,效果如图3.2.3所示。

    1.4K00

    怎么看计算机的历史记录手机_科学计算器怎么查看历史记录

    随便打开我的电脑或者浏览器,然后同时按下Ctrl+H组合键,窗口的左侧就会弹出浏览过的历史记录的小窗口,选择相应的日期之后下拉菜单后,会有浏览的网页记录和我的电脑(下图),双击我的电脑,出现的就是这一天你的电脑上的被浏览过的文件夹或文件...如何删除地址栏里的记录? 简单的: 在桌面上蓝色的IE浏览器图标上点右键属性删除历史记录删除文件。...点击常规选项卡里的清除历史记录按钮即可(注:这种方法会将IE地址栏里所有的网址全部清除)。 方法二:关闭IE,在开始菜单里选择运行(R)。...第二种:完全删除法 在桌面用鼠标右键点击IE图标,再点属性。选上面的内容按钮。再点下面的自动完成按钮。然后点击清除表单,就可以把以前的所有历史记录删掉。...如果想以后也把录用的内容不留历史记录,则把表单前面的勾去掉。 取消 评论 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

    1.8K10

    SSM整合案例

    中的正则表达式以及其他常用函数 js清除表单内容的reset方法 java中string类里面的matches校验正则表达式函数 使用springmvc的JSR303数据校验需要引入一下的依赖 @Pattern...---- js清除表单内容的reset方法 使用jquery获取到要重置的表单后,需要取出数组中的dom表单对象 //清除表单数据(表单重置)---DOM里面的方法,而不是jquery...//清除表单下面所有后代中含有这两个属性的 $(ele).find("*").removeClass("has-error has-success");...,上面设置的自定义校验属性 //这里还有一个问题需要处理,那就是当我们第一次添加一名符合规定的员工后,下一次打开表单还是上一次符合规定的员工 //并且如果我们不对数据进行修改...请求保存更新的员工数据 $.ajax({ //这里把员工id传递到更新按钮上,这样这里的id参数就可以直接从按钮上获得 url:"$

    5.1K21

    商城项目-品牌的新增

    先看文本框,昨天已经用过的,叫做v-text-field: ? 查看文档,v-text-field有以下关键属性: append-icon:文本框后追加图标,需要填写图标名称。...因为品牌LOGO只有一个 pic-width和pic-height:可以控制l图片上传后展示的宽高 最终结果: ? 1.1.4.5.按钮 上面已经把所有的表单项写完。最后就差提交和清空的按钮了。...说明: 规则是一个数组 数组中的元素是一个函数,该函数接收表单项的值作为参数,函数返回值两种情况: 返回true,代表成功, 返回错误提示信息,代表失败 1.1.5.2.项目中代码 我们有四个字段:...因此,我们需要在新增的ajax请求完成以后,关闭窗口 但问题在于,控制窗口是否显示的标记在父组件:MyBrand.vue中。子组件如何才能操作父组件的属性?或者告诉父组件该关闭窗口了?...第一步,在父组件中定义一个函数,用来关闭窗口,不过之前已经定义过了,我们优化一下,关闭的同时重新加载数据: closeWindow(){ // 关闭窗口 this.show = false

    3.4K10

    JqueryForm的使用方式

    想把现有的表单的提交方式变成异步提交的方式 异步上传文件 上面的第一种情况也可以用jquery ajax来实现 但是一旦表单中有文件上传就必须用jqueryform了 下载地址 官方文档 使用说明 常用方法...默认值:表单的action属性值 type 指定提交表单数据的方法(method):GET或POST。 默认值:表单的method属性值(如果没有找到默认为GET)。.../ 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); fieldSerialize() 将表单的字段元素串行化...该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox...$('#myFormId').clearForm(); clearFields() 清除字段元素。只有部分表单元素需要清除时才方便使用。 可链接(Chainable):可以。

    3.2K20

    JSP 防止网页刷新重复提交数据

    数据处理成功马上Redirect到另外一个页面 操作后刷新的确是个问题,你可以使用跳转页面、关闭本页面,如果是有参数据条件来控制的,那就应该好做了,可以直接修改window.location的值,把参数全部改掉...防止网页后退--新开窗口 用window.open弹出表单页面,点提交后关闭该页;处理提交的ASP页也是用弹出,设定表单的target,点提交时window.open("XXX.asp","_blank..."),然后用JS来提交表单,完成后window.close(); 简单的说,就是提交表单的时候弹出新窗口,关闭本窗口。...但有时候我们不得不关闭这个功能,以防止用户打乱预定的页面访问次序。本文介绍网络上可找到的各种禁用浏览器后退按钮方案,分析它们各自的优缺点和适用场合。    ...一种更安全但相当恼人的方法是,当表单提交时打开一个新的窗口,与此同时关闭表单所在的窗口。但我觉得这种方法不值得认真考虑,因为我们总不能让用户每提交一个表单就打开一个新窗口。

    14.3K20

    Ajax(二)

    表单 主要作用: 负责数据的采集功能。 三个组成部分 表单标签 它是一个容器,用来将页面上指定的区域划定为表单区域 表单域 提供了采集用户信息的渠道。...注意:每个表单域必须包含 name 属性,否则用户填写的信息无法被采集到 表单按钮 当表单数据填写完毕后,用户点击表单按钮,会触发表单的提交操作,从而把采集到的数据提交给服务器。...提交表单数据 在提交数据时,页面会自动跳转,导致用户体验感差。因为表单身兼数职: 负责采集数据 负责把数据提交到服务器 表单的默认提交行为会导致页面的跳转。 1....-- 提交按钮 --> 提交 使用Ajax解决页面跳转问题 通过 Ajax 提交表单采集到的数据,可以防止表单默认提交行为导致的页面跳转问题...步骤 给form注册submit事件 ==> 该事件会在表单提交的时候会触发 阻止表单的默认跳转行为 ==> 事件对象e.preventDefault() 收集表单中数据 发送ajax请求提交给服务器

    2.2K20

    经典面试题-描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理

    这张表是存放在服务器上的进程中的,也就是服务器的内存里,也就是Application里。...你可以试一下,在你请求过一次服务器之后,在服务器遍历客户端所有的cookie,就会发现这个叫做SessionID的cookie。...session的结束问题 还有知道了session的原理就会明白一个session会话如何结束,除非服务器端可以清除一个session会话,客户端是没有能力清除session的,关闭浏览器的时候并不能够结束当前的会话...(忽略浏览器关闭事件),在不依赖于cookie的session中最明显,你可以记下你的sessionID那串字符串,关闭浏览器,打开,把sessionID自己替换,你就可以恢复刚才的会话了。...对于js的ajax请求,确切的说是xmlhttp这个组件发送的http请求,虽然是你使用js的代码自己制造的,但是依然是借助于浏览器发送的,所以可以获得session。

    2.4K40

    html中表单的校验的插件,jquery表单验证插件validationEngine「建议收藏」

    inlineAjax false ajaxFormValidation false 使用 Ajax 验证表单 ajaxFormValidationURL false 设置 Ajax 验证的 URL,默认使用...$.noop 表单提交验证规则通过后,Ajax 验证之前的行为(Function)[Demo] onValidationComplete false 表单提交验证完成时的行为(Function) 可以得到两个参数...:表单元素 和 验证结果(ture or false)[Demo] onSuccess false 实时验证所有项目都通过时,发生的行为(Function)[Demo] onFailure false...hide $(“#form_id”).validationEngine(“hide”); 关闭表单中的提示 hideAll $(“#form_id”).validationEngine(“hideAll...”); 关闭页面上的所有提示 updatePromptsPosition $(“#form_id”).validationEngine(“updatePromptsPosition”) 更新提示层的位置

    3.8K10

    【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

    关键要点 1、密码表单标签结构 密码表单 , 就是将 input 表单标签设置 type 类型为 password , 右侧的..., 中间的输入框是 div 内部的 input 表单 ; 3、密码输入框样式设置 密码输入框样式设置 : 设置 输入框 的 宽度为 370 像素 , 高度设置为 30 像素 , 右侧的 小图标 大小...密码表单 的显示样式 ; 不分代码示例 : // 1....,隐藏密码内容 password.type = 'password'; // 更换显示密码的图标为“关闭眼睛”的图标...,隐藏密码内容 password.type = 'password'; // 更换显示密码的图标为“关闭眼睛”的图标

    1.5K10
    领券