lijun0349
- 浏览: 314315 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
Jett：
...
Android的Activity一打开就出现讨嫌的软键盘，怎样将其关闭？ -
nuannuan6818：
这也算是一种方法，不过感觉不可取，这样把图片的存储位置固定死了 ...
JSP 页面中用绝对路径显示图片 -
hhayyok：
xiexie
Eclipse jar打包详解 -
lixiplus：
写的好， 给力
JSP 页面中用绝对路径显示图片 -
叶落秋陌：
原来是把lib放在jar外面，帮了大忙~
Eclipse jar打包详解
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框提示列表效果</title>
<style type="text/css">
<!--
body{background:#fff}
.Menu {
position:relative;
width:204px;
height:127px;
z-index:1;
background: #FFF;
border:1px solid #000;
margin-top:-100px;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){
this.style.background="#F2F5EF";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}
#List1,#List2,#List3{left:0px;top:93px;}
-->
</style>
<script type="text/javascript">
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str){
var input=window.document.getElementById(obj);
input.value=str;
}
</script>
</head>
<body>
<div class="form">
<div> Location：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
<!--列表1-->
<div class="Menu" id="List1">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
<li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
</ul>
</div>
</div>
<div> Sex：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
<!--列表2-->
<div class="Menu" id="List2">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
<li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
</ul>
</div>
</div>
<div> education：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
<!--列表3-->
<div class="Menu" id="List3">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大专</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
<li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框提示列表效果</title>
<style type="text/css">
<!--
body{background:#fff}
.Menu {
position:relative;
width:204px;
height:127px;
z-index:1;
background: #FFF;
border:1px solid #000;
margin-top:-100px;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){
this.style.background="#F2F5EF";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}
#List1,#List2,#List3{left:0px;top:93px;}
-->
</style>
<script type="text/javascript">
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str){
var input=window.document.getElementById(obj);
input.value=str;
}
</script>
</head>
<body>
<div class="form">
<div> Location：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
<!--列表1-->
<div class="Menu" id="List1">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
<li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
</ul>
</div>
</div>
<div> Sex：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
<!--列表2-->
<div class="Menu" id="List2">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
<li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
</ul>
</div>
</div>
<div> education：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
<!--列表3-->
<div class="Menu" id="List3">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大专</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
<li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
</ul>
</div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
JS加减乘除运算
2013-09-03 12:13 1463//加法 Number.prototype.ad ... -
JS 利用正则表达式替换字符串
2013-08-15 15:46 9645JS 利用正则表达式替换字符串 var data = & ... -
JS验证
2013-07-19 11:43 10991. URL验证 function checkU ... -
JS常用方法
2013-06-14 11:48 949//1. 去空格 function doTrimStr( ... -
在JS弹出的遮罩层中，部分区域高亮显示并且可以编辑
2012-11-13 10:37 31591. 初始页面效果如下所示： 2. 点击“点击一下试试！”链 ... -
IE9浏览器下 使用JS获取图片尺寸大小 的方法
2012-11-01 15:17 4636情况一：以下代码在IE7、IE8下获取图片的尺寸大小是没有问题 ... -
JS遍历某个目录下的所有文件名
2011-02-23 18:46 4757<!DOCTYPE HTML PUBLIC " ... -
JAVASCRIPT----style 中visibility和display之间的区别
2009-08-13 16:06 1561大多数人很容易将CSS属 ... -
javascript自定义右键菜单
2009-02-06 18:56 2159<title>右键菜单v1.0</title ... -
javascript仿照google搜索框自动补全(可以输入一个“管”字查看效果。)
2009-02-06 18:51 5110<html> <body> <s ... -
javascript在线将汉字翻译为汉语拼音，可选择翻译中汉字对照
2009-02-06 18:16 3507<html> <head> <t ... -
点击链接弹出"图片另存为"而不是直接打开
2009-02-06 18:02 1751<iframe height="0" ... -
javascript实现页内搜索
2009-02-06 18:00 1282<!DOCTYPE html PUBLIC " ... -
jst实现MD5加密
2009-02-06 17:55 1191<HTML> <HEAD> <M ... -
javascript图片型按钮
2009-02-06 17:46 1291<style>.button { font: 12 ... -
javascript页面loading效果
2009-02-06 17:44 1699<html> <head> <t ... -
上传附件界面设计
2009-02-06 17:37 1369<head> <meta http-equ ... -
js停止输出
2009-02-06 17:13 991<SCRIPT LANGUAGE="Jav ... -
网站后台左右收缩型页面脚本
2009-02-06 17:06 1365<html> <meta http-equi ... -
JavaScript仿LightBox内容显示效果
2009-02-06 16:58 1357<!DOCTYPE html PUBLIC " ...
相关推荐
在当前的Web开发中，提升用户体验是非常重要的一个环节，而JavaScript 输入框提示列表效果是提高用户体验的一种常用技术手段。它通过提供动态提示列表帮助用户更快地找到他们要输入的内容，尤其在搜索功能中应用广泛...
实现输入框提示列表的关键在于JavaScript，它是网页动态效果的主要驱动力。在JavaScript中，我们可以利用事件监听、DOM操作以及数组处理等技术来构建这个功能。例如，当用户在输入框中输入字符时，触发一个事件，...
在IT界，输入框提示效果是用户界面设计中不可或缺的一部分，它极大地提升了用户体验。这种效果通常体现在各种Web应用、移动应用以及桌面软件中，用于引导用户输入正确的信息或提供操作指引。在这里，我们将深入探讨...
总的来说，"输入框下拉列表提示"是利用HTML、CSS和JavaScript实现的一种交互效果。通过监听用户输入，动态更新下拉列表的内容，可以极大地提高用户在表单输入时的效率和满意度。在实际项目中，可以根据需求进行扩展...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够创建出丰富的输入框提示文字效果。这个“简单的css3输入框提示文字效果”是一个实例，它展示了如何利用CSS3来优雅地处理...
"jQuery表单input输入框动画提示效果代码"就是一个针对这一目标的设计实践。jQuery库以其简洁、强大的API，使得创建复杂的动态效果变得相对简单，尤其是在处理用户输入时的反馈提示。 jQuery中的`focus`、`blur`、`...
在UI设计和前端开发中，"输入框提示文字上浮"是一种常见的交互设计方式，它主要体现在当用户聚焦到输入框时，原本显示在输入框内的提示性文字（hint）会浮升到输入框的上方，形成一种清晰的提示效果。这种设计能够...
在Windows Presentation Foundation (WPF) 中，为输入框实现水印提示效果是常见的设计需求，它可以在用户尚未输入任何文本时显示一条提示信息，而当用户开始输入时，该提示信息会自动消失。这种功能可以增强用户体验...
"jQuery表单获取和失去焦点输入框提示效果"是一种增强用户交互体验的技术，它通过jQuery库来实现对输入框的动态提示功能。当用户将光标移入输入框时，会显示提示信息，而当用户开始输入或移出输入框时，提示信息则会...
例如，Bootstrap提供了`form-control`类，可以方便地设置输入框样式，包括提示信息的显示效果。此外，一些表单验证库如jQuery Validation或Formik也能帮助我们更好地处理用户输入和提示信息的交互。 总结，H5输入框...
本教程将详细讲解如何使用简单的语句实现表单获取和失去焦点时输入框提示效果，主要涉及jQuery库的使用。 首先，我们需要在HTML文档中创建一个包含输入框的表单。例如，我们可以创建一个搜索表单，代码如下： ```...
在JavaScript和jQuery的世界里，创建一个插件来获取输入框的内容并设置其默认提示是一种常见的需求，这可以增强用户体验并提供更好的交互性。本插件就是针对这一需求设计的，名为"获取输入框内容设置输入框默认提示...
"jQuery实现输入框邮箱提示效果"就是一种常见的增强用户交互的方法。这个功能在用户输入邮箱地址时，会在输入框下方动态显示一些常见邮箱服务商的建议，如163、QQ、gmail等，帮助用户快速完成邮箱地址的输入。 ...
jQuery输入框自动提示车牌号码验证效果, 输入车牌号，下方提示，例如输入w ,则出现皖 ,这样的一个效果，在商城网站或者企业网站都会用到搜索的功能，与此功能类似，可以参考，php中文网推荐下载！
"ASP+AJAX输入框提示效果"是将这两种技术结合，为用户提供类似Google搜索那样的实时输入提示功能。在用户输入查询词时，服务器会根据输入的内容即时返回相关的建议，这些建议通常以下拉列表的形式显示在输入框下方，...
js 特效 输入框提示效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net
在本文中，我们将深入探讨如何使用JQuery实现输入框大写提示功能，这对于创建具有用户友好体验的登录界面尤其有用。...在实际项目中，还可以进一步优化，比如增加动画效果，或者根据用户习惯进行更智能的提示。
在这个名为“input框灰色提示字体效果”的项目中，我们可以看到一个名为`placeholder.js`的文件，这个文件很可能是用来解决IE浏览器对`placeholder`属性的兼容性问题。JavaScript库通常会监听输入框的事件，如`focus...