如何更改首次单击 HTML 输入字段微调器时显示的值？

Question

我创建了一个带有 HTML 数字输入字段的调查，我想更改在单击数字输入微调器或用户向上或向下按时显示的值 ("ArrowUp", "ArrowDown") 第一次。

下面的代码和随附的 fiddle 提供了一个示例。单击微调器（输入字段右侧的按钮）时，数字字段从 0 开始。我希望能够更改此初始值（例如，设置为 .53）。

<input type="number" min="-1" max="1" step="0.01" />

https://jsfiddle.net/pkzz6pno/

否则输入字段需要为空（尽可能避免影响用户响应，并使未填写字段显而易见）。因此，使用 "value" 或 "defaultValue" 不会导致所需的解决方案。使用占位符也不起作用，因为这不会更改微调器的起始值。

我还找到了一些允许完成此操作的附加组件以及一些关于如何关闭微调器的说明 (http://www.virtuosoft.eu/code/bootstrap-touchspin/)，但我希望找到一个侵入性较小的解决方案。

Answer 1

$(function() {
  var startVal = 0.53;
  var firstClick = false;
  $("#myId").focus(function() {
    if (!firstClick) {
      $(this).val(startVal);
      firstClick = true;
    }    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="myId" type="number" min="-1" max="1" step="0.01" />

这是一个示例，显示了单击（或单击箭头）时具有起始值的微调器。这是方法：

我使用 .focus() JQuery 函数让我能够在用户单击项目的每个组件（例如本例中的箭头）时绑定一个动作。

为了能够在点击退出和再次进入时不重置值，我使用了 boolean，当加载 DOM 时，它被初始化为 false。然后，当用户第一次点击时，我们进入为微调器设置默认值的函数，并将 false 的 var firstClick 更改为 true。再次尝试模糊和聚焦时，设置默认值的函数不会触发，因为 firstClick 的值为 true.

由于这是自定义行为，我认为如果没有 JavaScript，您将无法执行这样的过程。这里我用的是JQuery，是JavaScript plain.

做的打包工具

Answer 2

据我所知，您需要一种解决方案，其中初始值仅在用户开始与输入交互后出现。出于这个原因，我建议对 input 事件做出反应。该方法演示如下：

var initialValue = 0.53;
var $spinner = $("#spinner");

function setDefaultValue() {
  $(this).val(initialValue);
  $(this).off("input", setDefaultValue);
}

$spinner.on("input", setDefaultValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="spinner" type="number" min="-1" max="1" step="0.01" />

如何更改首次单击 HTML 输入字段微调器时显示的值？

How to change the value that shows up when an HTML input field spinner is clicked for the first time?

html

default

input

spinner