如何让进度条获取文本类型输入的值?
Posted
技术标签:
【中文标题】如何让进度条获取文本类型输入的值?【英文标题】:How do I make a progress bar get the value of a text-type input? 【发布时间】:2017-05-25 09:35:56 【问题描述】:我正在开发一个应用程序,其中用户必须在文本类型输入(或数字类型)中写入他们主导技能的百分比,并且我希望进度条自动具有该值。我需要这方面的帮助,最好只使用 php(如果可能的话),但如果你包含 JAVA 也没问题,我只想让它工作。
我使用了这个java脚本代码:
<script>
function myFunction()
document.getElementById("myProgress").value = $("#value");
</script>
我的 html 代码是:
<input type="number" id="value" max="100" step="10">
<button onclick="myFunction()">Try it</button>
<progress id="myProgress" value="22" max="100"></progress>
【问题讨论】:
我们无法为您编写代码,但我们可以更正您的代码(如有)。 好吧,您可以使用 jQuery 并在输入blur
时检查用户输入的百分比是否正确,如果正确,只需将输入类型设置为 hidden
并创建进度条。只有php是不可能的。
嗨@guest271314,我使用了这个java脚本代码: 我的 HTML 代码是这个 但它不起作用
@SergioMendez 你有什么问题? “但它不起作用” 你能在问题的文本中描述“不起作用”,创建一个 stacksn-ps 来演示吗?见***.com/help/how-to-ask、***.com/help/mcve
请用可读格式的代码更新您的问题。
【参考方案1】:
您可以在下面这样做。你不需要使用 jQuery 来实现它。
function func()
var x = document.getElementById("myProgress");
x.value = document.getElementById("value").value;
<input type="number" id="value" max="100" step="10">
<button onclick="func()">Try it</button>
<progress id="myProgress" value="10" max="100"></progress>
【讨论】:
【参考方案2】:如果我正确理解您的问题,您希望在用户输入您的文本输入时更新进度条。您想为“keyup”操作添加一个事件侦听器,因此每当用户释放其中一个键时,它将执行您放入事件侦听器主体的代码。
document.addEventListener("keyup", () =>
// code to update the progressbar styles here
, false);
【讨论】:
以上是关于如何让进度条获取文本类型输入的值?的主要内容,如果未能解决你的问题,请参考以下文章