html培训学校好不好中的autocomplete属性为什么不好使

&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论!()
自觉遵守:爱国、守法、自律、真实、文明的原则
尊重网上道德,遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论,本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款HTML 参考手册
HTML &input& autocomplete 属性
启用自动完成功能的 HTML 表单(其中一个输入字段禁用了自动完成):
&form action="demo_form.html" autocomplete="on"&
First name:&input type="text" name="fname"&&br&
Last name: &input type="text" name="lname"&&br&
E-mail: &input type="email" name="email" autocomplete="off"&&br&
&input type="submit"&
浏览器支持
所有主流浏览器都支持 autocomplete 属性。
提示:在某些浏览器中,您可能需要手动启用自动完成功能(在浏览器菜单的"参数设置"中进行设置)。
定义和用法
autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
注意:autocomplete 属性适用于下面的 &input& 类型:text、search、url、tel、email、password、datepickers、range 和 color。
HTML 4.01 与 HTML5之间的差异
autocomplete 属性是 HTML5 中的新属性。
&input autocomplete="on|off"&
默认。规定启用自动完成功能。
规定禁用自动完成功能。在html中,使用ActiveX出现对象不支持此属性或方法
[问题点数:40分,结帖人xuyilin1009]
在html中,使用ActiveX出现对象不支持此属性或方法
[问题点数:40分,结帖人xuyilin1009]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2011年9月 总版技术专家分月排行榜第一2011年8月 总版技术专家分月排行榜第一2011年7月 总版技术专家分月排行榜第一2011年6月 总版技术专家分月排行榜第一2011年5月 总版技术专家分月排行榜第一2011年4月 总版技术专家分月排行榜第一
2011年3月 总版技术专家分月排行榜第二2011年2月 总版技术专家分月排行榜第二
2011年9月 总版技术专家分月排行榜第一2011年8月 总版技术专家分月排行榜第一2011年7月 总版技术专家分月排行榜第一2011年6月 总版技术专家分月排行榜第一2011年5月 总版技术专家分月排行榜第一2011年4月 总版技术专家分月排行榜第一
2011年3月 总版技术专家分月排行榜第二2011年2月 总版技术专家分月排行榜第二
2011年9月 总版技术专家分月排行榜第一2011年8月 总版技术专家分月排行榜第一2011年7月 总版技术专家分月排行榜第一2011年6月 总版技术专家分月排行榜第一2011年5月 总版技术专家分月排行榜第一2011年4月 总版技术专家分月排行榜第一
2011年3月 总版技术专家分月排行榜第二2011年2月 总版技术专家分月排行榜第二
本帖子已过去太久远了,不再提供回复功能。您当前所在位置: >
> 移动开发
如何让html禁止文本框输入?
禁止文本框输入的几个常用标签input中有几个属性,分别是readonly、disabled、autocomplete,下面我们给大家介绍一下html禁止文本框输入吧!
一、html禁止input文本框输入
readonly 属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本。
&input readonly=&readonly& value=&xxxx&/&
  加入type=&text属性的代码编写
  &input type=&text& name=&www.xxx& readonly=&readonly& /&
加入type=&text属性的代码编写
disabled 属性规定应该禁用 input 元素。被禁用的 input 元素既不可用,也不可点击,也是不能选择。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。当然,我们也可以就需要通过 JavaScript 来删除disabled值,将input元素的值切换为可用。
加入type=&text属性的代码编写
二、css屏蔽input不输入:css的代码如下
三、前面有涉及到autocomplete这个属性,其实这个属性也是可以这里就运用到让文本框禁止输入上。具体代码如下:
&input type=&text& autocomplete=&off& id=&number&/&
autocomplete解释:input 的属性autocomplete 默认为on。其含义代表是否让浏览器自动记录之前输入的值。很多时候,需要对客户的资料进行保密,防止浏览器软件或者恶意插件获取到。可以在input中加入autocomplete=&off& 来关闭记录,所以说如果是不让input输入或者对系统需要保密的情况下可以使用此参数。
以上就是我们给大家介绍的html禁止文本框输入的方法了。希望大家继续关注我们的网站!
上一篇:下一篇:
本文相关阅读
高校查询分数线
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
地区批次线查询
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
科目理科文科综合其他
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
院校所在地北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
其它中央部委
类型工科农业师范民族
层次本科高职(专科)
高考志愿③部曲
频道热门推荐
栏目最新更新jQueryUI Autocomplete插件使用入门教程(最新版)
jQuery,无需多作介绍,相信各位读者都应该接触或使用过了。jQuery UI,简而言之,它是一个基于jQuery的前端UI框架。我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观、功能强大、跨浏览器兼容的前端html界面。今天,我们就来介绍jQuery UI中一个功能非常强大的部件Autocomplete。 Autocomplete,是一个功能强大的自动完成输入的jQuery插件,它也是jQuery UI的一部分。相信用过百度或者Google搜索的读者一定不会陌生,当我们在搜索框中开始输入搜索的关键字时,搜索引擎就会智能地帮我们联想并匹配我们所需的搜索关键字内容。Google搜索输入框的自动完成功能现在,我们使用jQuery UI的Autocomplete部件就可以非常简单方便地实现如上述图片中Google搜索框所具备的自动完成功能。jQuery UI 的当前最新版本为1.10.4。由于不同版本之间的用法也有所差异,其他网站关于之前版本的Autocomplete用法介绍并不能完全适用于最新版本。因此,我们有必要了解一下jQuery UI Autocomplete的最新用法。在使用Autocomplete实现自动完成功能之前,我们先来完成一些准备工作。比如,先编写包含如下代码的html文件:&!DOCTYPE html&
&html lang=&zh&&
&meta charset=&UTF-8&&
&title&jQuery Autocomplete入门示例&/title&
&label for=&language&&请输入指定的语言:&/lable&
&input id=&language& name=&language& type=&text&&
&/html&对应的运行效果如下:input.png在完成上述准备工作之后,我们需要在html代码中引入jQuery UI的js文件和css文件,由于jQuery UI是依赖于jQuery的,因此我们还需要在引入jQuery UI之前引入jQuery。&!DOCTYPE html&
&html lang=&zh&&
&meta charset=&UTF-8&&
&title&jQuery Autocomplete入门示例&/title&
&!-- 引入jQuery UI的css文件 --&
&link href=&/ui/1.10.4/themes/ui-darkness/jquery-ui.css& /&
&!-- 引入jQuery的js文件 --&
&script type=&text/javascript& src=&/jquery-1.9.1.js& &&/script&
&!-- 引入jQuery UI的js文件 --&
&script type=&text/javascript& src=&/ui/1.10.4/jquery-ui.js& &&/script&
&label for=&language&&请输入指定的语言:&/lable&
&input id=&language& name=&language& type=&text&&
&/html&现在,我们就来编写js代码让language输入框实现自动完成功能。要实现自动完成功能,我们需要如下调用jQuery UI扩展的autocomplete()方法:$(&#language&).autocomplete(optionsObj);这里的optionsObj是一个用于配置autocomplete相关参数选项的JavaScript对象。我们可以参考的相关说明来设置该对象。Autocomplete有一个非常重要的属性参数source,它表示用于自动完成功能的数据集合。source属性的值可以是一个数组;也可以是一个字符串,用于表示一个远程请求的URL地址,通过处理该URL返回的数据从而获得autocomplete所需的数据;它还可以是一个回调函数,以便于完成一些复杂的数据处理。现在,我们就使用最简单的方式,给source属性指定一个静态的数组,来初步实现自动完成功能。$(&#language&).autocomplete({
&Chinese&,
&English&,
&Spanish&,
&Russian&,
&Japanese&,
});此时,使用浏览器访问该html页面就会发现,我们已经完成的最基本的自动完成功能了。使用autocomplete实现基本的自动完成功能不过,有些时候我们希望列表显示的文本和实际输入的值并不一致。此时,我们为source指定多个对象的数组,每个对象必须包含label和value属性,label表示显示的文本,value表示实际输入的值(当然它也可以包括其他属性,你可以自行进行相关操作)。$(&#language&).autocomplete({
// 静态的数据源,根据label属性进行显示或模糊匹配,当给输入框设置value属性值
{ label: &Chinese&, value: 1 },
{ label: &English&, value: 2 },
{ label: &Spanish&, value: 3 },
{ label: &Russian&, value: 4 },
{ label: &French&, value: 5 },
{ label: &Japanese&, value: 6 },
// 最上面由多个字符串组成的数组,会被视为label和value值相同、均为该字符串的对象更多的时候,我们希望该输入框显示的还是label属性值,但还要给另外的元素(例如隐藏文本域)设置value属性值,或者做一些其他处理。我们可以使用select事件来协助处理。$(&#language&).autocomplete({
// 静态的数据源
{ label: &Chinese&, value: 1, sayHi: &你好& },
{ label: &English&, value: 2, sayHi: &Hello& },
{ label: &Spanish&, value: 3, sayHi: &Hola& },
{ label: &Russian&, value: 4, sayHi: &Привет& },
{ label: &French&, value: 5, sayHi: &Bonjour& },
{ label: &Japanese&, value: 6, sayHi: &こんにちは& },
select: function(event, ui){
// 这里的this指向当前输入框的DOM元素
// event参数是事件对象
// ui对象只有一个item属性,对应数据源中被选中的对象
$(this).value = ui.item.
$(&#lang_id&).val( ui.item.value );
$(&#sayHi&).html( ui.item.sayHi );
// 必须阻止事件的默认行为,否则autocomplete默认会把ui.item.value设为输入框的value值
event.preventDefault();
});在实际应用上,我们的数据源并不是一成不变的。大多数情况下,我们的数据都保存在数据库中,此时,我们就需要使用autocomplete通过AJAX请求获取远程数据作为数据源。$(&#language&).autocomplete({
source: &public.php&
});对应的 ajax-actions.php 的服务器页面代码如下:&?php
header(&#39;Content-Type:text/charset=UTF-8&#39;);
//为了方便举例,这里使用数组来模拟,你也可以在实际应用中从数据库中读取数据
//返回的数据最好是数组或对象类型的JSON格式字符串
$languages = array(&#39;Chinese&#39;, &#39;English&#39;, &#39;Spanish&#39;, &#39;Russian&#39;, &#39;French&#39;, &#39;Japanese&#39;, &#39;Korean&#39;, &#39;German&#39;);
echo json_encode($languages);
?&此时,我们再次访问该页面,我们仍然可以看到自动完成的输入效果。从远程服务器获取数据的自动完成功能注意:细心的读者可能已经注意到了,不管是从js数组中获取数据,还是从后台服务器获取数据,我们的数据并没有发生变化;但是,我们在从后台获取数据的页面输入&c&时,显示了所有的数据项,而不是如之前一样只显示筛选过滤之后的&Chinese&和&French&。这是因为,当我们从远程请求获取数据时,Autocomplete认为服务器已经进行了过滤处理,返回的数据都是直接可用的,无需再过滤。在发送AJAX请求时,Autocomplete会把当前输入框中的文字以默认参数名term的形式追加到我们设置的URL地址后面。当我们输入一个c时,Autocomplete实际发送的请求路径为/ajax-actions.php?term=c。在上面的实例中,由于我们使用的是php数组来模拟服务器返回的数据,没有根据用户的输入来返回对应的数据,才会导致上述结果。如果在实际应用中,使用类似如下SQL语句来查询数据,则不会存在该问题。&?php
// 注意:对于用户输入一般需要进行额外的安全处理
$term = $_GET[&#39;term&#39;];
$sql = &select column1 as label, column2 as value, ... from table1 where column1 like &#39;$term%&#39;&;
$languages = query($sql);
echo json_encode($languages);
?&此外,有些时候我们需要根据用户的输入或其他操作来构造不同的请求URL,我们可以为source指定函数。Autocomplete将用户输入交给该函数,该函数可以进行任何处理,然后把通过任何方式获得的数据交给Autocomplete处理即可。$(&#language&).autocomplete({
// 通过函数来获取并处理数据源
source: function(request, response){
// request对象只有一个term属性,对应用户输入的文本
// response是一个函数,在你自行处理并获取数据后,将JSON数据交给该函数处理,以便于autocomplete根据数据显示列表
// 自行处理并获取数据...
var dataObj = [...]; // 表示处理后的JSON数据
response(dataObj); // 最后将数据交给autocomplete去展示
});在上面的讲解中,我们介绍了autocomplete的必需参数选项source。除此之外,还有许多的参数选项可以给我们提供更加强大的其他辅助功能。请参考以下文章:
我们认为:用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
打开导航菜单

我要回帖

更多关于 html autocomplete 的文章

 

随机推荐