想要向上/向下箭頭輸入iOS的HTML數字

我有一個在iOS上運行的數字輸入框。我正在使用jquery和kendo mobile以及HTML5。想要向上/向下箭頭輸入iOS的HTML數字

在Icenium模擬器上輸入的數字有向上和向下的箭頭，但IPad沒有。我需要一種方式讓這些顯示在iPad上。我環顧四周，但需要一個直接的答案。

是否有可能在IPad上輸入數字的這些箭頭（例如數量）？如果沒有，有什麼辦法可以使用kendo mobile，HTML或CSS來實現類似的東西嗎？任何建議將不勝感激。

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

謝謝

來源

2013-10-09 user2681625

嘗試：

<!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>

快樂的日子！

來源

2013-10-09 12:42:47

ps它被稱爲spinedit :) –

據我所知，用戶需要輸入字段，即輸入（輸入）一個值的能力，這與建議的解決方案不同。 – silverchair

想要向上/向下箭頭輸入iOS的HTML數字

回答

相關問題