bootstrap input框清空

时间:2021-10-09 22:13:32
<!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>