連續改變的文本框的值作爲HTML5範圍滑塊移動

我有一對輸入端是文本和範圍類型分別連續改變的文本框的值作爲HTML5範圍滑塊移動

<input type=range min=100 max=100000 val=1000 step=1000 id=priceSliderMin></input> <input type=text id=priceTextMin></input>

我也有一對jQuery的函數更新作爲其他變化的夥伴輸入。

$('#priceSliderMin').change(function(event){ 
$('#priceTextMin').prop('value', parseInt($('#priceSliderMin').prop('value'))); 
}); 
$('#priceTextMin').keyup(function(event){ 
$('#priceSliderMin').prop('value', parseInt($('#priceTextMin').prop('value'))) 
})

問題是滑塊不會更新文本字段，直到我釋放鼠標按鈕。有什麼方法可以在它移動時更新它？我發現一個example使用原始Javascript似乎工作，但我不能用jQuery複製它，即使使用Chrome。

來源

2014-07-18 Maldaris

的如果您查看網頁的源代碼和例子，它們是實際上使用oninput在拖動時收聽更改（發佈的源代碼顯示onchange，直到拖動完成纔會觸發）。要在jQuery的做到這一點，試試這個...

$('#priceSliderMin').on('input', function(){ 
    $('#priceTextMin').val($('#priceSliderMin').val()); 
});

Demo - Fiddle

來源

2014-07-18 08:00:16

欺騙性的例子！感謝您作出澄清。 – Maldaris

試着將你的jQuery函數中的document.ready，如：

$(document).ready(function() { 
    $('#priceSliderMin').change(function(event){ 
    $('#priceTextMin').prop('value', parseInt($('#priceSliderMin').prop('value'))); 
}); 
    $('#priceTextMin').keyup(function(event){ 
    $('#priceSliderMin').prop('value', parseInt($('#priceTextMin').prop('value'))) 
}) 
});

它只是一個想法...祝您好運

來源

2014-07-18 07:55:29

我的錯沒有提及這一點，但元素是動態插入的，並且對它們所做的所有更改都是在您建議的document.ready塊內完成的。不過謝謝，強化了良好的做法。 – Maldaris

你可以使用.mousmove（）

$('#priceSliderMin').mousemove(function(){ 
    document.getElementById("range").innerHTML=this.value; 
    //$("#range").html(newValue); 
});

See demo here

來源

2014-07-18 08:04:05 GCallie

請勿使用'mousemove';輸入元素也可以通過鍵盤上的箭頭鍵進行更改。改用'on（'input'，...）'。 –

連續改變的文本框的值作爲HTML5範圍滑塊移動

回答

相關問題