web开发实例教程:使用placeholder属性进行提示

客户端完成加载页面时,将光标定位到表单的第一个表单域上能够提高用户输入数据的速度。许多搜索引擎通过JavaScript实现了这个功能,而现在,HTML提供了自动聚焦功能,并将其视为语言的一部分。

要使用HTML的自动聚焦功能,你只需在任意表单域中添加autofocus属性即可。

浏览器会把用户光标定位到最后一个设置了autofocus属性的表单域上。

回退

仅需少量JavaScript代码即可检测出是否存在autofocus属性,如果用户浏览器不支持

autofocus属性,则可使用jQuerv完成元素聚焦。这也许是你能提供的最简单的替代方案。

在页面中植入上面这段JavaScript代码后,你就可以随时使用autofocus属性而不必担心浏览器兼容性问题了。

页面加载完成时,autofocus属性能够略微简化用户开始填写表单的过程。现在,你可能还想在表单域上提供一些与类型相关的信息,如希望用户输入什么类型的值。没问题,接下来的placeholder属性正好可以解决这个问题。

本文由尚学堂在线学习平台www.sxt.cn提供,转载请注明出处。

时间: 2024-12-23 19:56:41

web开发实例教程:使用placeholder属性进行提示的相关文章

Web开发实例教程:如何创建多列布局

印刷行业使用多列排版已经好多年了,网页设计师也非常青睐这种排版模式.窄栏更适于读者阅读,随着显示区域变得越来越宽,开发人员也一直在找寻合适的列宽.毕竟,与在整页报纸上一行一行的阅读相比,谁也不愿意在显示器上从左到右的查看多行文本.在过去的十年中,出现过一些巧妙的解决方案来应对此问题,但是没有一个解决方案可以像CSS3规范提供的方法那样简单易懂. ◇  分栏 AwesomeCo每个月都会出版一份简报发给员工.公司使用了流行的web电子邮件系统.基于电子邮件的简报并不漂亮而且难于维护.公司曾决定将简

SpringMVC+Spring3+hibernate4 开发环境搭建以及一个开发实例教程

刚刚接触了SpringMVC这个框架,因此有必要把它拿过来同hibernate.Spring框架进行集成和开发一个实例,在真正企业从头开发的项目中往往一个稳定的开发环境至关重要,开发一个项目选择什么样的搭建平台也需要有经验才可以,并不是说你会搭建一个开发平台然后公司就会用你搭建的开发平台,一个项目或者一个公司看中的也不是你可以搭出框架,而是在这个框架使用过程中出现的各种问题你可以解决掉. 也就是说呢,无论开发什么项目要做到稳定.环境稳定.开发成本稳定.技术稳定.换句话说就是"风险可控"

《Python3 bottle Web开发系列教程》

<Python3 bottle Web开发系列教程——前言> http://blog.91duofanli.com/opensource/%E3%80%8APython3+bottle+Web%E5%BC%80%E5%8F%91%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B%E2%80%94%E2%80%94%E5%89%8D%E8%A8%80%E3%80%8B bottle web开发环境搭建 http://blog.91duofanli.com/opensourc

开机动画 看图学Android---Android 开发实例教程五

Android实例图解教程目录 http://blog.csdn.net/wyx100/article/details/45061407 在<开发一个新的android界面.界面跳转 看图学Android---Android 开发实例教程三.四>基础完成开机动画,开机界面的图片,在5.5秒内逐渐消失,显示主界面. 只修改StartActivity.java中代码以下部分 StartActivity.java源代码 package com.example.helloword; import an

Web开发入门教程:Pycharm轻松创建Flask项目

Web开发入门教程:Pycharm轻松创建Flask项目 打开Pycharm的file,选择创建新的项目,然后弹出对话框,我们可以看到里面有很多的案例,Flask.Django等等,我们选择生成Flask的demo程序 选择创建之后一个简易的Flask项目就出现在我们眼前,第一个是入口程序,还有一个static的静态目录,templates是模板存放的位置 我们可以手动来启动这个Flask项目,但是这不是很理智的,在Pycharm上面有个run,我们可以选择run来启动Flask的服务,默认打开

适合0基础的web开发系列教程-教程概述

教程概述 各位网友大家好,我是夜鹰教程网的汤老师,从今天开始,我准备写一套web前端开发的教程. 适合0基础的朋友,从最简单的html开始. 力争做到学完全套教程能在IT行业就业的水平. 特别适合应届毕业生.已上班但是想转行的朋友.喜欢前端开发的业余爱好者. 学习路线为: html =>css=>javascript=>jquery=>h5=>css3=>nodejs=>mongodb=>git>grunt=>webpack=>less=&

Arduino物联网开发实例教程

blinker解决方案 blinker是一套跨硬件.跨平台的物联网解决方案,提供APP端.设备端.服务器端支持,使用公有云服务进行数据传输.可用于智能家居.数据监测等领域,可以帮助用户更好更快地搭建物联网项目. blinker具备哪些优势 1. 支持多种连接方式blinker提供当前最流行的连接方式支持,如蓝牙.WiFi.NBiot/GPRS,可以应对大多数物联网场景需求.2. 支持多种开发平台blinker提供Arduino.freeRTOS(即将支持)支持库,可以使用AVR / ARM /

开发一个新的android界面、界面跳转 看图学Android---Android 开发实例教程三、四

Android实例图解教程目录 http://blog.csdn.net/wyx100/article/details/45061407 一.课程功能 本课程讲述建立一个新界面和界面切换(从界面一切换到界面二). 二.课程界面 界面一(启动界面) 界面二(主界面) 三.工作流程 完成页面切换需要2个过程: 1.建立一个工程,见第二节. http://blog.csdn.net/wyx100/article/details/45248209 可以在该项目基础继续开发. 2.建立开机界面 先引入资源

Web 开发入门教程(Vue + Spring Boot)

前言 这是一套面向 Java Web 技术栈新手的入门实战教程. 网上相关教程很多,但要么只是做了一个 DEMO ,要么对许多关键问题一笔带过.我的目标是根据这个教程,可以把一个完整的项目还原出来.当然,每个人的理解方式不同,可能有些细节没讲到位,欢迎大家在评论区提问,也可以通过邮箱 ([email protected]) 联系我,我一定会认真解答. 专栏目录(持续更新) 第一部分 Vue + Spring Boot 项目实战(一):项目简介 Vue + Spring Boot 项目实战(二):