<script language="javascript">
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "1sdfsdf.com";
arrList[intIndex++] = "a11sdafs.net";
arrList[intIndex++] = "b22dsafsdf";
arrList[intIndex++] = "c333asdfsadf";
arrList[intIndex++] = "4444dsafasdf";
arrList[intIndex++] = "dddsfddsafdsaf";
arrList[intIndex++] = "121213dsafsdaf";
arrList[intIndex++] = "43213asdfadsf";
arrList[intIndex++] = "dsa3121dasf3";
arrList[intIndex++] = "a213";
arrList[intIndex++] = "323313";
arrList[intIndex++] = "3213";
arrList[intIndex++] = "32213";
arrList[intIndex++] = "dsfsdddd";
arrList[intIndex++] = "ds11dfsfd";
arrList[intIndex++] = "ffdafd";
arrList[intIndex++] = "afdfd";
arrList[intIndex++] = "afd";
arrList[intIndex++] = "baffad";
arrList[intIndex++] = "2fda2fd";
arrList[intIndex++] = "dasd";
function test() {
init();
smanPromptList(arrList,"aspx")
smanPromptList(arrList,"aspx2")
smanPromptList(arrList,"inputer")
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
function checkKeyCode(){
var ie = (document.all)? true:false
if (ie){
var keyCode=event.keyCode
if (keyCode==40||keyCode==38){ //下上
var isUp=false
if(keyCode==40) isUp=true ;
chageselection(isUp)
}else if (keyCode==13){//回车
outselection(selectedIndex);
}else{
checkAndShow()
}
}else{
checkAndShow()
}
divPosition()
}
function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){
addOption(arrList[intTmp]);
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value){
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"
}
}
function chageselection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){
if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outselection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(){
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
objouter.style.left =getAbsoluteLeft(objInput);
objouter.style.width=getAbsoluteWidth(objInput)
}
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
</script>
<body onload="test()">
</body>
请输入内容:
<input type="text" id="inputer"> 如 a
<br>
<font color="red">
改来改去还是只能用于一个文本框的下拉提示
</font>
如果是两个的话就不能出来提示了呀。。。<br>
<input type="text" id="aspx"><br>
<input type="text" id="aspx2"><br>
多个文本框的下拉提示 还是没实现,
我的JS不好还请大家帮帮看看。我想
<font color="red" >
实现多个文本框都能下拉提示 怎么办啊。。。<br>
</font>
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "1sdfsdf.com";
arrList[intIndex++] = "a11sdafs.net";
arrList[intIndex++] = "b22dsafsdf";
arrList[intIndex++] = "c333asdfsadf";
arrList[intIndex++] = "4444dsafasdf";
arrList[intIndex++] = "dddsfddsafdsaf";
arrList[intIndex++] = "121213dsafsdaf";
arrList[intIndex++] = "43213asdfadsf";
arrList[intIndex++] = "dsa3121dasf3";
arrList[intIndex++] = "a213";
arrList[intIndex++] = "323313";
arrList[intIndex++] = "3213";
arrList[intIndex++] = "32213";
arrList[intIndex++] = "dsfsdddd";
arrList[intIndex++] = "ds11dfsfd";
arrList[intIndex++] = "ffdafd";
arrList[intIndex++] = "afdfd";
arrList[intIndex++] = "afd";
arrList[intIndex++] = "baffad";
arrList[intIndex++] = "2fda2fd";
arrList[intIndex++] = "dasd";
function test() {
init();
smanPromptList(arrList,"aspx")
smanPromptList(arrList,"aspx2")
smanPromptList(arrList,"inputer")
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
objInput.onfocus=checkAndShow;
function checkKeyCode(){
var ie = (document.all)? true:false
if (ie){
var keyCode=event.keyCode
if (keyCode==40||keyCode==38){ //下上
var isUp=false
if(keyCode==40) isUp=true ;
chageselection(isUp)
}else if (keyCode==13){//回车
outselection(selectedIndex);
}else{
checkAndShow()
}
}else{
checkAndShow()
}
divPosition()
}
function checkAndShow(){
var strInput = objInput.value
if (strInput!=""){
divPosition();
selectedIndex=-1;
objouter.innerHTML ="";
for (intTmp=0;intTmp<arrList.length;intTmp++){
if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){
addOption(arrList[intTmp]);
}
}
objouter.style.display='';
}else{
objouter.style.display='none';
}
function addOption(value){
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"
}
}
function chageselection(isUp){
if (objouter.style.display=='none'){
objouter.style.display='';
}else{
if (isUp)
selectedIndex++
else
selectedIndex--
}
var maxIndex = objouter.children.length-1;
if (selectedIndex<0){selectedIndex=0}
if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
for (intTmp=0;intTmp<=maxIndex;intTmp++){
if (intTmp==selectedIndex){
objouter.children[intTmp].className="sman_selectedStyle";
}else{
objouter.children[intTmp].className="";
}
}
}
function outselection(Index){
objInput.value = objouter.children[Index].innerText;
objouter.style.display='none';
}
function divPosition(){
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
objouter.style.left =getAbsoluteLeft(objInput);
objouter.style.width=getAbsoluteWidth(objInput)
}
}
document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
function getAbsoluteHeight(ob){
return ob.offsetHeight
}
function getAbsoluteWidth(ob){
return ob.offsetWidth
}
function getAbsoluteLeft(ob){
var mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
</script>
<body onload="test()">
</body>
请输入内容:
<input type="text" id="inputer"> 如 a
<br>
<font color="red">
改来改去还是只能用于一个文本框的下拉提示
</font>
如果是两个的话就不能出来提示了呀。。。<br>
<input type="text" id="aspx"><br>
<input type="text" id="aspx2"><br>
多个文本框的下拉提示 还是没实现,
我的JS不好还请大家帮帮看看。我想
<font color="red" >
实现多个文本框都能下拉提示 怎么办啊。。。<br>
</font>
发表评论
-
db2, oracle和sqlserver取前几行的语法
2010-10-18 11:58 940db2: select * from tab f ... -
项目总结(Ajax+Struts+Spring+Hiberante+SQLServer2000) 第一部分 (转载)
2008-03-29 16:49 675总算将一个项目勉强上线,也是第一次我独立完成的这么多任务,框架 ... -
实例学习Spring和Hibernate的一点点体会 (转载)
2008-03-29 17:36 785昨天用Spring写DAO,有朋友说比较Hibernate还是 ... -
jsp+xsl查询数据库
2008-04-06 19:26 1028往往JSP通常用来动态的生成HTML文件,来 ... -
hibernate3.0中文查询问题解决方法
2008-04-07 13:08 736在applicationContext.xml中加入如下代码: ... -
简单的JSTL应用(入门)
2008-04-07 19:51 1014需要的包及TLD文件: 首先需要将用到的jar包放入WEB-I ... -
EL表达式语言
2008-04-09 00:30 692引用:http://blog.163.com/s_zhchlu ... -
使用COOKIE登录验证(转载)
2008-04-21 20:11 1518附加功能:登录成功后 ... -
JavaMail
2008-04-30 13:19 649package org.hank.mail;import ... -
用"window.showModalDialog()"实现DIV模式弹出窗口 (转)
2008-05-04 09:20 17731、test.html 测试页 <html> ... -
以二进制流的方式存取图像
2008-05-07 00:03 1235imageinfo.sql CREATE TABLE ... -
java 生成图片缩略图
2008-05-08 13:26 7171方法一: import javax.imageio.Image ... -
一个不错的弹出窗口的js效果(值的收藏)
2008-06-02 19:00 1113<script type="text/jav ... -
<c:forEach>&条件标签使用
2008-06-06 09:57 7097<c:forEach>标签的使 ... -
div 缓慢下拉效果
2008-06-10 18:05 1519<!DOCTYPE html PUBLIC " ... -
弹出窗口传值
2008-06-13 09:07 909子窗口中内容: function change(obj){ ... -
Action之间传值
2008-06-13 09:13 864return new ActionForward(" ... -
数据库连接池简介
2008-06-15 14:30 741数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应 ... -
Spring的事务管理
2008-06-15 14:32 428Spring提供了一致的事务管理抽象。这个抽象是Sprin ... -
form产生的空行的解决
2008-06-16 16:32 680利用css属性,将form的内部上下左右的填充距离设置为0就好 ...
相关推荐
附件中的"input框中出现提示文字(兼容ie 火狐 谷歌)"可能包含了一个JavaScript或者jQuery的解决方案,旨在为旧版IE、火狐和谷歌浏览器提供一致的提示文字功能。 在IE8及以下版本,我们可以使用传统的JavaScript...
综上所述,`js-input输入框提示语`是前端开发中的基本需求,通过HTML的`placeholder`属性结合JavaScript的动态操作,可以实现丰富的提示语功能,提高用户交互体验。在实际开发中,还需要考虑到兼容性和用户体验,...
VueValidate是一个专门为Vue设计的表单验证插件,它允许开发者轻松地实现对多个input框的同步校验,并在输入框右侧实时显示提示信息。 在Vue中,我们通常会为每个input绑定一个v-model指令,用来同步用户的输入数据...
如果提示信息需要根据用户操作或数据变化,可以使用JavaScript来动态修改提示框的内容。例如,将提示信息设为变量,然后在需要时更新它: ```javascript var tipMessage = '提示信息'; // 更新提示信息 tipBox...
可以有效的阻止在hutml文档的input框中输入内容,纯手写,经检测可以顺利运行
js 特效 html 特效 input框的隐藏显示
标题“java中js代码删除input框”表明我们要讨论的是如何使用JavaScript来删除一个HTML中的input元素。在描述中提到,当用户点击“删除”按钮时,会触发一个JavaScript方法,这个方法将负责删除指定的input框。 ...
js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项
js 特效 html 特效 Input框中的滚动信息
这种功能通常被应用于搜索框、表单筛选等场景,当用户在输入框内输入文字时,系统会根据输入内容动态展示一个下拉列表,提供匹配的建议选项供用户选择。这种技术在现代网页和应用开发中非常普遍,能够极大地提升用户...
js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
标题中的“javascript经典特效---Input框中的滚动信息”指的是在JavaScript编程中实现的一种特定的用户界面效果,即在输入框(Input)内显示滚动信息。这种特效常见于各种Web应用中,例如实时提示、错误信息显示或者...
本文将详细介绍如何在`input`框中添加图片按钮,并确保该设计能够兼容主流浏览器如火狐、谷歌以及IE。 #### 实现原理 实现这一功能的关键在于CSS定位技术与JavaScript的动态样式调整。通过设置不同的CSS样式属性...
在这个案例中,我们将深入理解如何利用JavaScript来增强用户在input框中的输入体验,比如实时验证、动态添加新的input字段等。 在描述中,“input框的增加.rar”进一步强调了这个压缩包内容的重点是关于input框数量...
js 特效 html 特效 缩小的input框 js 特效 html 特效 缩小的input框
在JavaScript编程领域中,"input框的隐藏显示"是一个常见的需求,特别是在网页交互设计中。Input框,也就是HTML中的`<input>`元素,是用户输入数据的基本组件。本教程将深入探讨如何通过JavaScript来控制input框的...
标题中的“input类似百度谷歌检索功能js加css数据后台ajax调用”指的是在网页中实现一个搜索框(input元素)的功能,它模仿了百度和谷歌搜索引擎的实时检索特性。这个功能通常结合JavaScript(js)、CSS(css)以及...
这是我从自己项目中抽取出来的十分简单的小代码,为input框自动添加后缀,希望大家一起交流
为了更方便地创建提示框,还可以借助现有的JavaScript库或框架,如jQuery UI、Bootstrap的Modal组件等。这些库提供了丰富的功能和易于使用的API,可以快速构建出美观且功能强大的提示框。 总结来说,JavaScript ...
IE11 在Input框内添加一个“X”,用来点击清除用户输入的数据,个人觉挺好用的,但是其它浏览器不会出现, 特进行插件扩展,实现所有浏览器都能出现“X” 实现原理: 此插件通过查找所有Input框 type="text" 属性 ...