本文介绍了计算一个输入字段的长度,然后使用 Gravity Forms 和 Javascript 将其打印在另一个字段中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在为 Wordpress 使用 Gravity Forms,我想弄清楚如何计算用户在我的一个输入框中键入的字符的长度,并将该数字打印到同一表单中的另一个输入框中.我认为这可以用 Javascript 来完成,但我是一个新手,这是我非常淡化的努力.只是为了让你看到我在做什么.
<表格><input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1"><input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2"><div style="padding:10px 15px; font-family:sans-serif !important;"><p id="preview" style="text-align:center;font-size:22px;font-weight:bold;">示例文本</p>
</表单><脚本>var bank = document.getElementById("input_1_2");var countNum = document.getElementById("input_1_10");bank.addEventListener("keyup", function(e) {countNum.value = bank.value.length;});document.getElementById("preview").innerHTML= countNum.value;
因此,用户将在 #input_1_10 中输入他们的消息",我需要一种方法来计算字符数(最好不计算空格)并在用户提交表单之前将它们打印在 #input_1_2 中.
** 我还想知道如何将#input_1_2 的值写入 ID 为 #preview 的段落中.**
感谢您的关注;)
解决方案
将 eventListener
添加到第一个输入.在这种情况下,每当用户按下和释放一个键时,输入的长度将显示在第二个输入中.
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1"><input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2"></表单><脚本>var bank = document.getElementById("input_1_10");var countNum = document.getElementById("input_1_2");bank.addEventListener("keyup", function(e) {countNum.value = bank.value.length;});
I am using Gravity Forms for Wordpress and I am trying to figure out how to count the length of characters a user types into one of my input boxes and print that number to another input box in the same form. I think this can be done with Javascript but I am a total newb and well here is my very watered down effort. Just so you can see what I am trying to do.
<!-- edited -->
<form>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
<div style="padding:10px 15px; font-family:sans-serif !important;">
<p id="preview" style="text-align:center;font-size:22px;font-weight:bold;">Sample Text</p>
</div>
</form>
<script>
var bank = document.getElementById("input_1_2");
var countNum = document.getElementById("input_1_10");
bank.addEventListener("keyup", function(e) {
countNum.value = bank.value.length;
});
document.getElementById("preview").innerHTML= countNum.value;
</script>
So the user will type their "message" in #input_1_10 and i need a way to count the characters(preferably without counting spaces) and print them in #input_1_2 before the user submits the form.
** EDIT: I would also like to know how to write the value of #input_1_2 in to the paragraph with the ID of #preview. **
Thanks for looking ;)
解决方案
Add an eventListener
to the first input. In this case, whenever the user presses and releases a key, the length of the input will be displayed in the second input.
<form>
<input name="input_10" id="input_1_10" type="text" value="" class="small" tabindex="1">
<input name="input_2" id="input_1_2" type="text" value="" class="medium" tabindex="2">
</form>
<script>
var bank = document.getElementById("input_1_10");
var countNum = document.getElementById("input_1_2");
bank.addEventListener("keyup", function(e) {
countNum.value = bank.value.length;
});
</script>
这篇关于计算一个输入字段的长度,然后使用 Gravity Forms 和 Javascript 将其打印在另一个字段中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!