从html输入获取值 [英] Getting values from html inputs
问题描述
我有一个输入元素，它是一个范围滑块，我想将其变成一个上下限的滑块.尽管正在讨论中，但尚未针对范围实现此功能. 如您所见，这是一个受欢迎的问题.
I have an input element that is a range slider that I wanted to turn into a slider with a lower and an upper bound. This feature isn't implemented yet for range although it's being discussed. As you can see this is a popular question.
我的问题是，我检索滑块结果的方式似乎不再起作用，并且我不明白为什么.我原来的滑块是这样的:
My issue is that the way I was retrieving the results of the slider no longer seems to work and I don't understand why. My original slider works like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<label for="slider">
<input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
stuff: <output name="sliderAmount" for="slider">0</output>
</label>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("slider");
var amtChange = function () {
document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
每次滑动条时，它都会用新结果更新填充div.我希望能够使用jquery滑块执行相同的操作，但改为使用范围更新东西div.
Every time you slide the bar it updates the stuff div with the new result. I want to be able do the same thing with the jquery slider but update the stuff div with the range instead.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<form>
<label for="amount">Price range:</label>
<input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("amount");
var amtChange = function () {
document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
但是，这似乎无法从滑块输入中拉出范围.如果我进入Chrome的jquery示例控制台，则可以键入amt.value，它将每次都返回该值.我在这里想念什么?
However, this doesn't seem to be able to pull the range from the slider input. If I go into the console in Chrome for the jquery example I can type amt.value and it will return the value every time. What am I missing here?
推荐答案
只需更改input的值时触发change()方法.
Just trigger the change() method for input while changing it's value.
尝试一下:
演示: FIDDLE
DEMO: FIDDLE
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]).change();
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1)).change();
});
这篇关于从html输入获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
