Question

我有一个HTML表单，其中包含我正在使用的输入范围，因此用户可以将年龄设置在18到100之间。

输入范围显示良好。但是，我希望在用户向上/向下滑动范围时向用户显示输出值。

我认为最好的方法是使用CSS / Jquery。

我的问题是没有显示输出值。请有人能告诉我我要去哪里哪里吗？

我的HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="container">
    <div class="about_edit">
        <h3>About Me</h3>
        <form action="" method="post" name="edit">

            <label>Age</label>
            <input type="range" id="start" name="age" min="18" max="100">
            <output for="age" onforminput="value = age.valueAsNumber;"></output>

            <input name="submit" type="submit" value="Login" />
        </form>
    </div>
</div>

在同一页面上，我有我的Jquery：

<script>
    // DOM Ready
$(function() {
 var el, newPoint, newPlace, offset;

 // Select all range inputs, watch for change
 $("input[type='range']").change(function() {

   // Cache this for efficiency
   el = $(this);

   // Measure width of range input
   width = el.width();

   // Figure out placement percentage between left and right of input
   newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));

   // Janky value to get pointer to line up better
   offset = -1.3;

   // Prevent bubble from going beyond left or right (unsupported browsers)
   if (newPoint < 0) { newPlace = 0; }
   else if (newPoint > 1) { newPlace = width; }
   else { newPlace = width * newPoint + offset; offset -= newPoint; }

   // Move bubble
   el
     .next("output")
     .css({
       left: newPlace,
       marginLeft: offset + "%"
     })
     .text(el.val());
 })
 // Fake a change to position bubble at page load
 .trigger('change');
});
</script>

<script>
    var minValue, maxValue;
if (!el.attr("min")) { minValue = 0; } else { minValue = el.attr("min"); }
</script>

然后我有我的CSS：

<style>
.about_edit{
    border-bottom:1px solid #ccc;
} 

label {
  width: 140px;
  text-align: left;
  margin-top:20px;

}

input {
  width: 100%;
  padding:5px;
  margin: 8px 0;
  box-sizing: border-box;
}

.edit {
  width: 100%;
  height:35px;
  margin:0 auto;
  box-sizing: border-box;
  line-height: 20px;
  padding:10px;

}


output { 
  position: absolute;
  background-image: linear-gradient(top, #444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
</style>

Answer 1

好的，如果我了解您要正确执行的操作，则可以使用纯HTML进行操作。该代码段适用于范围，我将尝试解释您要去哪里哪里

<form action="" method="post" name="edit" oninput="age_output.value=parseInt(age.value);">

    <label>Age</label>
    18<input type="range" id="start" name="age" min="18" max="100" />100
    <output name="age_output" for="start" ></output>

</form>

将onforminput从<output>移至表单本身，并将其重命名为oninput
名称属性是您想要在表单上的oninput事件中放置的内容
输入前后的18和100只是视觉辅助工具，用于了解最小和最大范围
for中的<output>与输入中的id一起使用，而不是name

希望这有所帮助，如果没有尝试，请尝试使用此链接https://www.w3schools.com/tags/tag_output.asp

Answer 2

据我所知，这里的主要罪魁祸首是您在输入滑块元素而不是标签或其他包含文本的元素上使用.text（）函数。试试这个：

        $('label').text("Age: "+el.val());

我也建议您监听“输入”事件，而不是监听“更改”事件。根据JQuery.com：

“当用户对元素的值进行更改时，change会为输入，选择和textarea元素触发。与输入事件不同，不一定会针对元素值的每次更改触发change事件。”

这是一个具有这些更改的有效示例： https://jsfiddle.net/m3gsfntq/2/

Answer 3

以下是通过Materialize ...

实现的范围工具提示

我认为它更简单，并且比您尝试过的CSS Tricks example更可爱...

$(document).ready(function() {
  $("#start").range();
});

input {
  width: 100%;
  padding:5px;
  margin: 8px 0;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="container">
  <div class="about_edit">
    <h3>About Me</h3>
    <form action="" method="post" name="edit">

      <label>Age</label>
      <p class="range-field">
        <input type="range" id="start" name="age" min="18" max="100">
      </p>

      <input name="submit" type="submit" value="Login" />
    </form>
  </div>
</div>

在HTML表单输入范围上显示输出值-不起作用？

3 个答案: