文档章节

JS----------------创建一个具有下拉框效果的input输入框

哎那个新来的
 哎那个新来的
发布于 2016/08/16 10:47
字数 384
阅读 18
收藏 0

1.创建一个具有下拉框效果的input的输入框的思路:

1.页面:创建一个input输入框,其下面有一个div

2.通过js函数,点击input的时候触发。为div中添加<ul><li></li></ul>列表

3.其中的<li></li>列表点击的时候,为input赋值为<li></li>中的值

实例:

<!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">
*{
    margin:0px;
    padding:0px;
    font-size:14px;
    }
.lis{
    border-bottom:1px solid #000;
    }
</style>

</head>

<body>
<div style="position:absolute; width:300px; height:100px; left:50%; margin-left:-250px; margin-top:180px; padding:60px; border:1px solid red">
<table>
<tr>
<td>
<input type="text" style="width:50px" value="0.0";  id="tInput" onfocus="setValue('block')"/>
<div id="addValue" style="width:51px; height:130px; z-index:2;position:absolute;top:82px;left:63px;"></div>
</td>
</tr>
</table>
</div>
<input type="button" id="btn" value="提交" onclick="showInputValue()"/>
<script>
function setValue(dValue,obj){
var divNode = document.getElementById("addValue");
    if(dValue == "block"){
        var iHtml="<ul style='list-style:none; border:1px solid #000;' onmouseout='toHander(this)'>"+
        "<li class='lis' onclick =setValue('none',this)>0.5</li><li class='lis' onclick=setValue('none',this)>1.0</li><li class='lis' onclick=setValue('none',this)>1.5</li>"+
        "<li class='lis'onclick=setValue('none',this)>2.0</li><li class='lis' onclick = setValue('none',this)>2.5</li><li onclick=setValue('none',this)>3.0</li></ul>";
        divNode.innerHTML = iHtml;    
    }else{
        //为控件input赋值[div中li的setValue()函数]
        if(obj!=null){
            var txtNode = document.getElementById("tInput");
            //为text文本赋值为<li>标签中的值
            txtNode.value=obj.innerHTML;
        }
        //隐藏div
        divNode.innerHTML = "";
    }
}
//设置移动上去变为收的形状
function toHander(obj){
    obj.style.cursor = 'pointer';
    
}

//显示input的值
function showInputValue(){
var inpNode = document.getElementById("tInput");
    alert(inpNode.value);
}
</script>
</body>

</html>

© 著作权归作者所有

共有 人打赏支持
哎那个新来的
粉丝 1
博文 94
码字总数 30350
作品 0
闸北
程序员
私信 提问
DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTM...

ZhangLG
2018/05/26
0
0
说说 Vue.js 中的 v-model 指令以及如何绑定表单元素

我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。 html: js: 效果...

deniro
2018/12/02
0
0
编写更加通用的 JavaScript

当你准备好抽象出一个 Web 组件的时候, JavaScript 能帮你做到,融入组件的 JavaScript 变得优雅利索;此时它像一把瑞士军刀,轻松帮你应对各种场景。但当你急于交付时,JavaScript 也能帮你...

红薯
2011/02/10
748
8
input搜索下拉提示框,支持拼音检索、过滤、级联、自定义数据源的ajax异步下拉展示

为解决大数据量下拉字典效率及操作问题,整理出通用的数据字典模块,所有字典数据可在数据库维护,在大数据量时采用分页下拉的展示方式,同时支持拼音简拼搜索,代码项、代码值搜索等,支持无...

神话无名
2018/06/07
516
1
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
2
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
4
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
3
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0
远程获得的有趣的linux命令

使用这些工具从远程了解天气、阅读资料等。 我们即将结束为期 24 天的 Linux 命令行玩具日历。希望你有一直在看,如果没有,请回到开始,从头看过来。你会发现 Linux 终端有很多游戏、消遣和...

Linux就该这么学
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部