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

最新推荐文章于 2022-04-27 10:33:55 发布

lzhnightwind

最新推荐文章于 2022-04-27 10:33:55 发布

阅读量571

点赞数

分类专栏：知识点滴文章标签： DropDown click input number

本文链接：https://blog.csdn.net/lzhnightwind/article/details/84441495

版权

知识点滴专栏收录该内容

7 篇文章 0 订阅

订阅专栏

百说不如一例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>

<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 才能正确运行

lzhnightwind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何阻止在DropDown 菜单选项上click后，菜单消失及如何让input只接受数字输入

百说不如一例Bootstrap 101 Template Dropdown trigger Limit Another action // 阻止click event,避免菜单消失$...
复制链接

扫一扫