<input />标记在这个例子中是如何工作的?

时间:2015-02-06 11:30:16

标签: javascript html forms

初学者javascript问题。我正在尝试按照tutorial关注创建带有限制字符的表单。

代码如下:

1。限制文字的功能:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

2.文本区域的创建

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>
</form>

我理解代码如何与这一行分开:

You have <input readonly type="text" name="countdown" size="3" value="15"> characters left.</font>

如何/为什么显示文本区域中的剩余字符?

很抱歉一个非常简单的问题,我只是从JS / HTML开始,这让我很困惑。

1 个答案:

答案 0 :(得分:1)

HOW

每次键入或键入textarea时,都会执行一个功能。该函数需要3个参数

  1. limitField是对
  2. 中输入的实际字段的引用
  3. limitCount是对另一个字段的引用,该字段用于显示剩余字符数
  4. limitNum - 是您希望在limitField
  5. 中允许的最大字符数

    该方法的逻辑类似于此(在伪代码中)

    if the number of characters typed is greater than the mmaximum allowed characters
        truncate the field value back to the maximum allowed
    otherwise
        display the number of remaining characters in the remaining count field
    

    最后一行似乎是您混淆的根源,让我们回到实际代码:

    limitCount.value = limitNum - limitField.value.length;
    

    在这一行中,limitCount是对您突出显示为问题混淆的行中字段的引用。 limitNum是允许的最大字符数,limitField是输入的textarea。任何输入都可以使用.value读取/写入其文本,因此该行字面上说&#34;将剩余字符字段的值设置为允许的最大字符数减去已经键入的字符总数。&#34 ;

    WHY

    因为编程。