`
lzhnightwind
  • 浏览: 23961 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何阻止在DropDown 菜单选项上click后,菜单消失及如何让input只接受数字输入

阅读更多
百说不如一例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>


  <div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
    <ul id="helpDropDownMenu" class="dropdown-menu" role="menu">
      <li class="dropdown-submenu"><a id="axisLimitLbl" class="dropdown-submenu">Limit</a>
        <ul class="dropdown-menu limitConfPanel">
          <input id="axisLimit" class="axisLimitInputCls" type="text" placeholder="" maxlength="3" />
        </ul></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
    </ul>
  </div>

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
// 阻止click event,避免菜单消失
$('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});
 
// 只接受数字输入
$(document).ready(function(){
    $('#axisLimit').keypress(validateNumber);
});

function validateNumber(event) {

    var key = window.event ? event.keyCode : event.which;

    if (event.keyCode == 8 || event.keyCode == 46
     || event.keyCode == 37 || event.keyCode == 39) {
        return true;
    }
    else if ( key < 48 || key > 57 ) {
        return false;
    }
    else return true;
};
</script>
</body>
</html>

需要加载 bootstrap.min.js 才能正确运行
分享到:
评论

相关推荐

    jQuery input文本框点击下拉菜单选择代码

    在这个例子中,我们创建了一个`&lt;ul&gt;`元素作为下拉菜单,并遍历options数组,为每个选项创建一个`&lt;li&gt;`元素。当用户点击某个选项时,我们将input文本框的值设置为所选选项的值,并隐藏下拉菜单。同时,当input元素...

    jquery input下拉菜单选中效果.zip

    3. **事件监听**:使用`.on()`方法监听用户的交互,如点击事件,以便在用户选择选项时更新input的值并触发相关的行为,例如提交表单或动态加载更多内容。 4. **DOM操作**:`.val()`方法用于设置或获取input元素的值...

    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    在本文中,我们将探讨如何在Vue.js应用程序中结合Element UI库创建一个具有下拉功能菜单的树形控件,这个功能通常用于增强用户界面的交互性。Vue和Element UI的组合提供了丰富的UI组件,使得开发人员能够快速构建...

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    默认情况下,Dropdown菜单需要用户点击才能展开,但这可能会降低交互效率,特别是在桌面应用中,用户更习惯于通过鼠标悬停来触发下拉菜单。 为了实现Dropdown下拉菜单在鼠标悬停时自动展开,我们可以遵循以下步骤:...

    dropdown(CSS+jquery,not select)

    在网页设计中,下拉菜单(Dropdown)是一种常见的交互元素,用于展示多个可选项或功能。本主题将探讨如何使用CSS和jQuery来实现一个非HTML `&lt;select&gt;` 元素的下拉菜单。这种方式能提供更丰富的自定义和交互性,以...

    JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

    一个常见的场景是在网页上使用下拉菜单(Dropdown menu)供用户选择,然后需要将用户选中的内容实时反映到页面的其他元素中,如input输入框。这样的功能可以提高用户体验,减少用户的操作步骤。 要实现点击下拉菜单...

    jquery 下拉菜单

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画效果方面。"jQuery下拉菜单"是网页交互设计中常见的一个功能,广泛应用于导航栏或者选项...

    jQuery搜索框下拉菜单分类选择代码

    通过这样的实现,用户在搜索框中输入时,下拉菜单将动态展示匹配的分类,选择分类后可快速执行搜索,提高用户体验。这在网页应用中是一个常见的功能,尤其适用于内容丰富、需要分类导航的网站。

    Bootstrap-3-Tutorial-30---Input-Group-Button-Dropdown:以下视频教程的代码

    输入组按钮下拉菜单在Bootstrap中主要用于创建具有附加操作的输入元素,比如搜索框旁的筛选选项。这个功能是通过添加特定的类和结构来实现的。下面我们将详细讲解如何创建这样的组件: 1. **基础结构**:首先,你...

    js 自定义下拉框

    在自定义下拉框的场景中,我们可能将其作为触发下拉菜单显示的触发器,当用户在输入框内输入或点击时,展示下拉选项。 实现自定义下拉框的基本步骤如下: 1. 创建HTML结构:我们需要一个输入框(`&lt;input&gt;`)和一个...

    聚焦input框,显示下拉框

    在网页设计中,"聚焦input框,显示下拉框"是一种常见的交互效果,常用于搜索框、选择器或表单输入等场景。这种效果能够提升用户体验,让用户更快地找到和选择所需信息。以下是对这个主题的详细解释: 一、HTML与CSS...

    BootStrap点击下拉菜单项后显示一个新的输入框实现代码

    在Bootstrap框架中,创建一个交互式的用户界面,如点击下拉菜单项后显示或隐藏不同的输入框,可以增强用户体验并使界面更加灵活。本示例介绍如何实现这一功能,特别是当用户点击下拉菜单的A选项时显示文本输入框,而...

    解决bootstrap下拉菜单点击立即隐藏bug的方法

    $('.all&gt;input').click(function() { var flag = $(this).prop('checked'); banks.prop('checked', flag); }); ``` 上面的代码可以实现全选和反选功能。当点击全选按钮时,所有的子选项都会被选中或取消选中。 三...

    下拉多选框

    在网页设计和开发中,"下拉多选框"是一种常见的用户界面元素,它允许用户在一组选项中选择多个项目。这种功能常用于需要用户快速筛选或选择多个选项的场景,如设置偏好、选择服务等。本文将详细介绍如何实现基于`...

    下拉列表JS网页特效

    下拉列表(Dropdown List)是网页设计中常见的一种交互元素,它通常用于提供多项选择,让用户在有限的空间内浏览和选择。在JavaScript中,我们可以通过编程实现更丰富的下拉列表特效,提高用户体验,使得网页更加...

    jQuery input文本框点击下拉选择特效代码

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作,事件处理,动画制作和Ajax交互。本篇文章将详细讲解如何利用jQuery实现一个点击input文本框后出现下拉选择的特效代码。 ...

    jQuery搜索框插件下拉菜单选择代码

    首先,我们需要监听`input`元素的`focus`和`blur`事件,以便在用户聚焦时显示下拉菜单,失去焦点时隐藏它: ```javascript $("#searchInput").on("focus", function() { $("#dropdownMenu").show(); }).on("blur",...

    基于jQuery实现的自定义下拉框控件

    $('.dropdown-toggle').on('click', function() { $(this).next('.dropdown-menu').toggle(); }); ``` 这段代码将监听`dropdown-toggle`按钮的点击事件,当点击时,其后的`.dropdown-menu`元素会切换显示状态。...

    Jquery实现下拉多选框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题将深入探讨如何使用jQuery实现一个下拉多选框,这在创建交互式用户界面时非常常见。 首先,我们需要理解下...

    JQuery UI 中文帮助文档

    - **Dropdown Menu(下拉菜单)**: 创建下拉菜单,可进行多级导航,与jQuery的`select`元素结合使用效果更佳。 - **Button(按钮)**: 将HTML的`&lt;button&gt;`、`&lt;input type="button"&gt;`或`&lt;a&gt;`元素美化为具有各种样式...

Global site tag (gtag.js) - Google Analytics