如何为输入文本设置值和占位符？

Question

我需要为文本框添加提示。我知道它可以通过 placeholder 完成，但我还需要为同一个文本框设置值（初始值应该隐藏）。有什么办法而不是一些逻辑？

这发生在我使用 html5 和 jquery-mobile 开发移动应用程序时。我正在尝试构建一个自定义的小时和分钟选择器。 html 的 Insted 在 jquery-mobile 中有任何选项吗？

谢谢

Answer 1

通过 JQM 文档确定的标准 JQM 方法设置占位符值。 然后，让 JQuery 监视用户选择输入字段。 然后告诉 JQuery 向输入字段添加一个值。

你可以尝试这样的事情：

要使用占位符设置输入字段：

<input type="text" name="fname" id="input" placeholder="YOUR PLACEHOLDER TEXT">

添加默认值：

$("#input").focus(function() {
     $(this).InnerHTML("ADD DEFAULT VALUE HERE");
 });

JQuery 占位符信息

JQuery 焦点信息

Answer 2

这将有助于在此处检查和运行代码片段。

 const inputElement = document.getElementById('my-input'); const suffixElement = document.getElementById('my-suffix'); inputElement.addEventListener('input', updateSuffix); updateSuffix(); function updateSuffix() { const width = getTextWidth(inputElement.value, '12px arial'); suffixElement.style.left = width + 'px'; } function getTextWidth(text, font) { // re-use canvas object for better performance var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); context.font = font; var metrics = context.measureText(text); return metrics.width; }

 #my-input-container { display: inline-block; position: relative; font: 12px arial; } #my-input { font: inherit; } #my-suffix { position: absolute; left: 0; top: 3px; color: #555; padding-left: 5px; font: inherit; }

 <div id="my-input-container"> <input type="number" id="my-input" value="15"> <span id="my-suffix">%</span> </div>