<!DOCTYPE HTML>
<html>
<head>
<link
    href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
    rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
    href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">

    </script>
    <script type="text/javascript"
        src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">

    </script>
    <script type="text/javascript"
        src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
</head>
<body>
    <div id="datetimepicker" class="input-append date">
        <input type="text" readonly="readonly"></input> <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
        </span>
    </div>

    <div class="input-append">
    <span id="bb" style="display: none;">
        <input class="span2" id="appendedInput" type="text" style="width: 180px;"> <span
            class="add-on" style="cursor: pointer;" onclick="kk()">X</span></span>
            <input id="aa" type="text">
    </div>

    <script type="text/javascript">

        $('#datetimepicker').datetimepicker({
            format : 'MM/dd/yyyy hh:mm',
            language : 'en',
            pickDate : true,
            pickTime : true,
            hourStep : ,
            minuteStep : ,
            secondStep : ,
            inputMask : true
        });

        $("#aa").keyup(function(){
            var i = $("#aa").val().trim();
            if(i!=""){
                $("#bb").show();
                $("#appendedInput").focus();
                $("#appendedInput").val(i);
                $("#aa").hide();
                $("#aa").val("");
            }
        })
        function kk(){
            $("#appendedInput").val("");
            $("#bb").hide();
            $("#aa").show();
            $("#aa").focus();
        }
    </script>
</body>
</html>

bootstrap input框清空的更多相关文章

  1. 类似input框内最右边添加图标，有清空功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. [Selenium] 使用Javascript选中Input框里的内容，然后清空

    当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:

  3. bootstrap模态框input不能获取焦点并编辑【转】

    Bootstrap模态框时input标签[日期控件也有这样的问题]不能编辑的问题,下面是我的解决方法: 1.将下图中框出来的属性删掉即可: 2.兼容火狐浏览器,笔者在火狐中还是不能编辑,去掉下图属性即 ...

  4. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  5. select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

      select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...

  6. 解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决

    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...

  7. bootstrap 模态框中弹出层 input不能获得焦点且不可编辑

    bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...

  8. 百度小程序-form表单点击提交,input框内容不会清空

    百度小程序与微信小程序相似度90%.微信小程序转换为百度小程序,部分还是需要人工修改! 做了一个form留言表单,点击提交之后,input框第一次会清空,但是第二次就不会清空了! 不多说直接上代码! ...

  9. bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动，select选中跳转

    bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...

随机推荐

  1. supervisor简介

    一什么是supervisor Superviosr是一个UNIX-like系统上的进程监控工具. Supervisor是一个Python开发的client/server系统,可以管理和监控*nix上面 ...

  2. 【JavaScript】变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级

    参考资料http://caibaojian.com/toutiao/5446 1.所有变量声明(var)或者声明函数都会被提升到当前函数顶部 关于函数表达式,js会将代码拆分为两行代码分别执行.这里需 ...

  3. XSS 跨站脚本攻击之构造剖析(一)

    1.XSS-Filter:跨站脚本过滤器,用于分析用户提交的输入,并消除潜在的跨站脚本攻击 (1)XSS Filter实际上是一段精心编写的过滤函数作用是过滤XSS跨站脚本代码: (2)绕过XSS F ...

  4. json返回数据库的时间格式为/Date(1477294037000)/，怎样在前台进行格式化转换

    方法一: 原理是取中间的数,再转换成js的Date类型 function ChangeDateFormat(val) { if (val != null) { var date = new Date( ...

  5. 有损FLV视频的画面宽高比修改方案

    问题背景: 需要向网站上发布一条视频新闻,就是新闻只有一段视频.上面给的是一个FLV的视频,大小接近200M,差不多200分钟吧.本来觉得很简单的事,直接上传发布就完了,但是一波三折啊……第一轮上传时 ...

  6. hdu 5459 Jesus Is Here （费波纳茨递推）

    Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/102400 K (Java/Others)Total Submission ...

  7. sql in(1,2,3)参数化查询，错误在将 varchar 值 '1,2,3,4' 转换成数据类型 int 时失败

    解决办法 string userIds = "1,2,3,4";using (SqlConnection conn = new SqlConnection(connectionSt ...

  8. 5分钟弄懂Docker--转载

    编者按:7月3日的“CSDN在线培训:Docker之道”,同时在线人数达到了历史新高,但是最后的QA环节,笔者发现大家的问题 还是很初级的,Docker技术还处在Gartner技术曲线的萌芽期.刚好前 ...

  9. Floyd_Warshall POJ 3660 Cow Contest

    题目传送门 题意: m组关系,A能打败B,问最后有几头牛的排名能确定 分析:如果排名确定,那么能打败它的到它一定通,它到能打败的一定能通,也就是和为n-1.用Floyd的传递闭包 #include & ...

  10. docker 1.0.0发布以及一个bug依赖apparmor_parser

    6月10号docker 1.0稳定版本发布,找了台ubuntu的机器,装了下 ubuntu version:12.04 docker version:1.0.0 装docker的步骤可以看官方文档:h ...