想要 iOS 的向上/向下箭头 HTML 数字输入答案

【问题标题】：Want Up/Down Arrows HTML number input for iOS想要 iOS 的向上/向下箭头 HTML 数字输入
【发布时间】：2013-10-09 09:25:59
【问题描述】：

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

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

是否可以将这些箭头用于在 iPad 上输入数字（例如数量）？如果没有，有什么方法可以使用剑道移动、HTML 或 CSS 实现类似的东西吗？任何建议将不胜感激。

This is what i need

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

谢谢

【问题讨论】：

标签： ios css html input kendo-mobile

【解决方案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>

快乐的日子！

【讨论】：

据我了解，用户需要输入字段，即能够输入（输入）一个值，而建议的解决方案并非如此。