`
天涯海角tour
  • 浏览: 174656 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

input 自动填充

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>文本框输入提示/自动完成功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript">
function mSift_SeekTp(oObj,nDire){if(oObj.getBoundingClientRect&&!document.all){var oDc=document.documentElement;switch(nDire){case 0:return oObj.getBoundingClientRect().top+oDc.scrollTop;case 1:return oObj.getBoundingClientRect().right+oDc.scrollLeft;case 2:return oObj.getBoundingClientRect().bottom+oDc.scrollTop;case 3:return oObj.getBoundingClientRect().left+oDc.scrollLeft;}}else{if(nDire==1||nDire==3){var nPosition=oObj.offsetLeft;}else{var nPosition=oObj.offsetTop;}if(arguments[arguments.length-1]!=0){if(nDire==1){nPosition+=oObj.offsetWidth;}else if(nDire==2){nPosition+=oObj.offsetHeight;}}if(oObj.offsetParent!=null){nPosition+=mSift_SeekTp(oObj.offsetParent,nDire,0);}return nPosition;}}
function mSift(cVarName,nMax){this.oo=cVarName;this.Max=nMax;}
mSift.prototype={
Varsion:'v2010.10.29 by AngusYoung | mrxcool.com',
Target:Object,
TgList:Object,
Listeners:null,
SelIndex:0,
Data:[],
ReData:[],
Create:function(oObj){
var _this=this;
var oUL=document.createElement('ul');
oUL.style.display='none';
oObj.parentNode.insertBefore(oUL,oObj);
_this.TgList=oUL;
oObj.onkeydown=oObj.onclick=function(e){_this.Listen(this,e);};
oObj.onblur=function(){setTimeout(function(){_this.Clear();},100);};
},
Complete:function(){},
Select:function(){
var _this=this;
if(_this.ReData.length>0){
_this.Target.value=_this.ReData[_this.SelIndex].replace(/\*/g,'*').replace(/\|/g,'|');
_this.Clear();
}
setTimeout(function(){_this.Target.focus();},10);
_this.Complete();
},
Listen:function(oObj){
var _this=this;
_this.Target=oObj;
var e=arguments[arguments.length-1];
var ev=window.event||e;
switch(ev.keyCode){
case 9://TAB
return;
case 13://ENTER
_this.Target.blur();
_this.Select();
return;
case 38://UP
_this.SelIndex=_this.SelIndex>0?_this.SelIndex-1:_this.ReData.length-1;
break;
case 40://DOWN
_this.SelIndex=_this.SelIndex<_this.ReData.length-1?_this.SelIndex+1:0;
break;
default:
_this.SelIndex=0;
}
if(_this.Listeners){clearInterval(_this.Listeners);}
_this.Listeners=setInterval(function(){
_this.Get();
},10);
},
Get:function(){
var _this=this;
if(_this.Target.value==''){_this.Clear();return;}
if(_this.Listeners){clearInterval(_this.Listeners);};
_this.ReData=[];
var cResult='';
for(var i=0;i<_this.Data.length;i++){
if(_this.Data[i].toLowerCase().indexOf(_this.Target.value.toLowerCase())>=0){
_this.ReData.push(_this.Data[i]);
if(_this.ReData.length==_this.Max){break;}
}
}
var cRegPattern=_this.Target.value.replace(/\*/g,'*');
cRegPattern=cRegPattern.replace(/\|/g,'|');
cRegPattern=cRegPattern.replace(/\+/g,'\\+');
cRegPattern=cRegPattern.replace(/\./g,'\\.');
cRegPattern=cRegPattern.replace(/\?/g,'\\?');
cRegPattern=cRegPattern.replace(/\^/g,'\\^');
cRegPattern=cRegPattern.replace(/\$/g,'\\$');
cRegPattern=cRegPattern.replace(/\(/g,'\\(');
cRegPattern=cRegPattern.replace(/\)/g,'\\)');
cRegPattern=cRegPattern.replace(/\[/g,'\\[');
cRegPattern=cRegPattern.replace(/\]/g,'\\]');
cRegPattern=cRegPattern.replace(/\\/g,'\\\\');
var cRegEx=new RegExp(cRegPattern,'i');
for(var i=0;i<_this.ReData.length;i++){
if(_this.Target.value.indexOf('*')>=0){
_this.ReData[i]=_this.ReData[i].replace(/\*/g,'*');
}
if(_this.Target.value.indexOf('|')>=0){
_this.ReData[i]=_this.ReData[i].replace(/\|/g,'|');
}
cResult+='<li style="padding:0 5px;line-height:20px;cursor:default;" onmouseover="'+
_this.oo+'.ChangeOn(this);'+_this.oo+'.SelIndex='+i+';" onmousedown="'+_this.oo+'.Select();">'
+_this.ReData[i].replace(cRegEx,function(s){return '<span style="background:#ff9;font-weight:bold;font-style:normal;color:#e60;">'+s+'</span>';});+'</li>';
}
if(cResult==''){_this.Clear();}
else{
_this.TgList.innerHTML=cResult;
_this.TgList.style.cssText='display:block;position:absolute;background:#fff;border:#090 solid 1px;margin:-1px 0 0;padding: 5px;list-style:none;font-size:12px;';
_this.TgList.style.top=mSift_SeekTp(_this.Target,2)+'px';
_this.TgList.style.left=mSift_SeekTp(_this.Target,3)+'px';
_this.TgList.style.width=_this.Target.offsetWidth-12+'px';
}
var oLi=_this.TgList.getElementsByTagName('li');
if(oLi.length>0){
oLi[_this.SelIndex].style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;';
}
},
ChangeOn:function(oObj){
var oLi=this.TgList.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++) {
oLi[i].style.cssText='padding:0 5px;line-height:20px;cursor:default;';
}
oObj.style.cssText='background:#36c;padding:0 5px;line-height:20px;cursor:default;color:#fff;';
},
Clear:function(){
var _this=this;
if(_this.TgList){
_this.TgList.style.display='none';
_this.ReData=[];
_this.SelIndex=0;
}
}
}
</script>
</head>
<body>

<form name="salefrm" method="post" action="?action=add">
<input type="text" id="abc" value="l" size="40">
<input type="text" id="we" value="烈" size="60">
</form>
<script type="text/javascript">
//建立实例，第一个参数是实例对象的名称，第二个是最多显示的数量
var oo=new mSift('oo',20);
//数据
oo.Data=['liehuo.net','liehuo.org','liehuo javascript','liehuo 教程','liehuo 下载','li 属性','li 的使用方法','liehuo.org 搜索','liehuo 学院网址'];
//指定文本框对象建立特效
oo.Create(document.getElementById('abc'));
var oxo=new mSift('oxo',20);
oxo.Data=['烈火','烈火网','烈火学院','烈火下载站','烈火技术论坛'];
oxo.Create(document.getElementById('we'));
</script>
</body>
</html><br />

 

分享到：
| js 处理日期类型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    清除input自动填充

    清除input在浏览器中自动填充用户名等的情况，JQuery解决，IE8 ，chrome等均可以使用。

    JS存储用户填写表单信息，刷新自动填充

    Sisyphus.js 是一个利用 HTML5 技术实现的自动保存草稿插件，它能将表单数据自动保存到 LocalStorage 中。...它也是一个轻量级的 jQuery 插件，使用也非常简单，可以设置每隔一段时间或者是数据有变化时自动...

    chrome表单自动填充导致input文本框背景变成偏黄色问题解决

    在使用谷歌浏览器（Chrome）时，用户可能会遇到一个常见的视觉问题，即当表单启用自动填充功能后，`input` 文本框的背景颜色会变为一种偏黄色（#FAFFBD）。这个问题是由于 Chrome 浏览器为了区分自动填充的信息，会...

    自动填充 input 标签

    ### 自动填充input标签：JavaScript实现 在现代Web开发中，自动填充功能是提升用户体验的重要手段之一。本文将深入探讨如何使用JavaScript（简称JS）来实现一个简单的自动填充功能，并结合给定的代码示例进行详细...

    jQuery Mobile 表单自动填充

    jQuery Mobile 表单自动填充 支持input textare radio checkbox select 等标签

    chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式

    首先，问题的根源在于Chrome浏览器对自动填充的input元素添加了一个名为`-webkit-autofill`的私有样式。这个样式会给输入框添加淡黄色背景（`background-color: rgb(250, 255, 189)`）和特定的字体颜色。为了解决这...

    javascript input自动赋值

    以上就是关于"javascript input自动赋值"这一主题的详细解释，涵盖了使用JavaScript原生方法、HTML事件和jQuery框架的不同实现方式。通过深入理解这些方法，开发者可以更灵活地控制网页中的input元素，提升用户体验...

    chrome自动填充表单.rar

    Chrome自动填充表单功能是谷歌浏览器提供的一项便捷服务，它能够帮助用户在填写网页表单时节省时间。这项功能通过存储用户的姓名、地址、电子邮件、电话号码等个人信息，当遇到相同的表单字段时，可以自动填充之前...

    自动填充时间实例

    自动填充时间功能通常基于JavaScript或其框架（如jQuery、Vue.js、React.js等）来实现，通过监听文本框（input元素）的特定事件（如focus、change等），结合当前系统时间，动态生成并填充到文本框中。这样用户无需...

    JavaWeb ajax异步自动填充信息

    本示例“JavaWeb ajax异步自动填充信息”是一个典型的Ajax应用，模拟了搜索引擎如百度在用户输入时自动填充建议的功能。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在...

    自动填充功能实现-- 实例源码

    2. **事件监听**：通过监听用户在输入框中的键入事件，如`input`或`keydown`，来触发自动填充功能。 3. **匹配算法**：当用户输入时，需要一个算法来找出与输入相匹配的建议。这可能涉及到字符串的模糊匹配，如...

    用excel自动填充网页表单

    ### 使用Excel自动填充网页表单的关键技术与实践 #### 标题解读： 标题“用Excel自动填充网页表单”简明扼要地概括了本文的主要内容：如何利用Microsoft Excel中的编程技术来实现自动填写网页上的表单。 #### 描述...

    解决浏览器会自动填充密码的问题

    解决办法是在form上或input上添加autoComplete=”off”这个属性。 form表单的属性如下所示： 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决。 1.’autocomplete=”off”‘在Chrome中不起作用解决方案 ...

    COOKIE自动填充注销的实现

    自动填充功能则是在用户输入时，浏览器根据先前保存的数据自动完成输入，提高用户体验。本篇文章将深入探讨如何实现Cookie的自动填充和注销功能，并通过一个小案例进行演示。 首先，我们要理解Cookie的工作原理。...

    layui自动填充插件autocomplete.rar

    在layui中，"autocomplete"是一款自动填充插件，常用于输入框，提供智能提示功能，提高用户输入效率。这款插件适用于各种需要自动补全场景，如搜索框、表单填写等。 在layui的autocomplete插件中，主要涉及以下知识...

    避免自动填充表单_html5_javascript_

    这个属性可以设置在`&lt;form&gt;`或`&lt;input&gt;`标签上，用来控制浏览器是否提供自动填充。默认情况下，浏览器会根据用户的浏览历史和保存的表单数据尝试填充表单字段。要禁用这个功能，可以将`autocomplete`属性设置为`off`...

    jquery-autocomplete 自动填充插件参数使用说明

    在Web开发中，为了提升用户体验，自动填充（Autocomplete）功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件，名为jQuery UI Autocomplete，它可以帮助开发者轻松实现这种功能。...

    自动填充文本框,轻松搞定

    对于"自动填充文本框,轻松搞定"这个主题，我们可以深入探讨jQuery如何帮助开发者实现这一功能。 首先，jQuery的核心优势在于它的选择器机制，能够方便地选取DOM元素。例如，如果有一个文本框`&lt;input type="text" id...

    日本都道府县填充，邮编自动填充基于jquery.zip2addr.js实现

    &lt;input type="text" id="prefecture" placeholder="都道府县将自动填充"&gt; &lt;input type="text" id="city" placeholder="市区町村将自动填充"&gt; $(document).ready(function() { $('#zipcode').zip2addr({ ...

    登录不弹框提示保存密码.不自动填充.文本框不拉选择

    此外，还可以通过JavaScript监听`input`事件，清除自动填充的内容： ```javascript document.getElementById('username').addEventListener('input', function(e) { if (this.value === '') { this.value = ''; ...

Magicbox
Global site tag (gtag.js) - Google Analytics