slider使用jquery輸入手機號碼

Question

我正在進行UI調整，我想使用滑塊選擇手機號碼。 用戶將使用滑塊在範圍0至9之間選擇一個數字。 每個選擇用戶將按[空格鍵]或[ESC]鍵確認選定的號碼。 確認後，該號碼應顯示在文本框或標籤字段中。

截至目前我可以繼續，直到從滑塊選擇一個單一的數字。 任何人可以建議綁定事件選擇電話號碼？

這個

可能我要綁定事件

$("#PhNumber").on("slidestop", function (e) { 
    $("#output").html($("#PhNumber").val()); 
}); 

這裏是我試過的小提琴： http://jsfiddle.net/8hphL2jp/13/

和代碼片段：

$("#PhNumber").on("slidestop", function (e) { 
 
    $("#output").html($("#PhNumber").val()); 
 
}); 
 

 
$("#PhNumber").on("focusin focusout", function (e) { 
 
    if (e.type == "focusin") { 
 
     $(this).on("change", function (e) { 
 
      $("#change").html($("#PhNumber").val()); 
 
     }); 
 
    } else { 
 
     $(this).off("change"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div data-role="page"> 
 
    <label for="PhNumber">Phone Number</label> 
 
    <input type="range" name="PhNumber" id="PhNumber" value="0" min="0" max="9" /> 
 
    <div>Slidestop:<span id="output">---</span> 
 
    </div> 
 
    <div>Input:<span id="change">---</span> 
 
    </div> 
 
</div>

Answer 1

我想象你正在尋找這樣的片段。您可以將keyup與文檔綁定，以確定當時按下某個鍵的時間，您可以檢查按下的任何鍵是否與您想要聽的鍵碼相匹配。

要在開始時保留「---」，您可以應用另一個if來測試範圍是否包含「---」，並且在附加數字之前是否清空它。

$("#PhNumber").on("change", function (e) { 
 
    $("#output").html($("#PhNumber").val()); 
 
}); 
 

 
$(document).on("keyup", function (e) { 
 
    if($("#change").text() === "---"){ 
 
     $("#change").empty(); 
 
    } 
 
    
 
    if(e.keyCode === 32 || e.keyCode === 8){ 
 
     $("#change").append($("#PhNumber").val()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-role="page"> 
 
    <label for="PhNumber">Phone Number</label> 
 
    <input type="range" name="PhNumber" id="PhNumber" value="0" min="0" max="9" /> 
 
    <div>Slidestop:<span id="output">---</span> 
 
    </div> 
 
    <div>Input:<span id="change">---</span> 
 
    </div> 
 
</div>