Question

我有一个在iOS上运行的数字输入框。我正在使用jquery和kendo mobile以及HTML5。

Icenium模拟器上输入的数字有向上和向下箭头，但IPad没有。我需要一种方法让这些出现在iPad上。我环顾四周但需要一个直接的答案。

是否可以在IPad上输入数字这些箭头（例如数量）？如果没有，有什么办法可以实现类似的东西，可能使用kendo mobile，HTML或CSS？任何建议都会非常感激。

<input type="number" value="numberText"/>
<style>    
input[type=number]
    {
        padding:10px;
    }
</style>

谢谢

Answer 1

尝试：

<!DOCTYPE html>
<html lang="en">
    <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
    <style>
        .number-wrapper {
            margin: 10px 5px;
            position: relative;
        }
        .number {
            font-size: 30px;
            color: #eee;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background: #000;
            -moz-background-clip: padding;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            padding: 0 12px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 1px solid #555;
            -moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
            -webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
            box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
            -moz-text-shadow: 0 3px 3px #000000;
            -webkit-text-shadow: 0 3px 3px #000000;
            text-shadow: 0 3px 3px #000000;
        }
        .inc {
            position: absolute;
            display: block;
            top: -35px;
            left: 0;
            font-weight: bold;
            font-size: 18px;
            color: #777;
            width: 100%;
            height: 90%;
            text-align: center;
            padding-top: 6px;
        }
        .dec {
            position: absolute;
            display: block;
            bottom: -18px;
            left: 0;
            padding-top: 14px;
            font-weight: bold;
            font-size: 18px;
            color: #777;
            width: 100%;
            height: 90%;
            text-align: center;
        }
        .line {
            position: absolute;
            width: 100%;
            height: 1px;
            top: 52%;
            left: 0;
            background: #000;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
        }
    </style>
    <body>
        <div id="SETtime">
            <span class="number-wrapper"><div class="line"></div><span class="inc">+</span><span id="mx" class="number m">00</span><span class="dec">-</span></span>
        </div>
    </body>
    <script>
        function twodigits(num) {
            return ('0' + num).slice(-2);
        }

        $('.inc').click(function() {
            var target = $(this).siblings('.number').first();
            var value = parseInt(target.text());
            value++;
            target.text(twodigits(value));
        });

        $('.dec').click(function() {
            var target = $(this).siblings('.number').first();
            var value = parseInt(target.text());
            value--;
            target.text(twodigits(value));
        });
    </script>
</html>

快乐的日子！

想要向上/向下箭头输入iOS的HTML编号

1 个答案: