Question

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

当我使用html5和jquery-mobile开发移动应用程序时发生了这种情况。我正在尝试构建一个自定义的小时和分钟选择器。在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 Placeholder info

JQuery Focus info

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>

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

2 个答案: