Question

也许我一直在我的网站上工作很长时间，但我无法让以下工作。我正在让我的textarea触发一个名为limiter的onkeyup（）事件，该事件应该检查textarea并限制框中的文本，同时更新另一个显示剩余字符数量的只读输入字段。

这是javascript代码：

<script type="text/javascript">
var count = "500";
function limiter(){
    var comment = document.getElementById("comment");
    var form = this.parent;
    var tex = comment.value;
    var len = tex.length;
    if(len > count){
        tex = tex.substring(0,count);
        comment.value =tex;
        return false;
    }
    form.limit.value = count-len;
}
</script>

表格如下：

<form id="add-course-rating" method="post" action="/course_ratings/add/8/3/5/3" 
accept-  charset="utf-8"><div style="display:none;"><input type="hidden" 
name="_method"    value="POST" />


    //Other inputs here

    <div id="comment-name" style="margin-top:10px">
    <div id="comment-name-text">
    <b>Comments</b><br />
    Please leave any comments that you think will help anyone else.
    </div>
    <style type="text/css">
    .rating-form-box textarea {
        -moz-border-radius:5px 5px 5px 5px;
    }
    </style>
    <div class="rating-form-box">
             <textarea name="data[CourseRatings][comment]" id="comment" 
                 onkeyup="limiter()" cols="115" rows="5" ></textarea>
                 <script type="text/javascript">
                     document.write("<input type=text name=limit size=4 
                     readonly value="+count+">");
                 </script>
    </div>
<input type="submit" value="Add Rating" style="float: right;">
</form>

如果有人能提供帮助那就太棒了。

Answer 1

你有：

onkeyup="limiter()"

由于您未在对象的上下文中调用limiter，因此您正在调用window.limiter。

var form = this.parent;

因此this为window而form为window.parent，与window相同（除非文档在框架中加载）。< / p>

您想要this表单控件。使用event binding中的unobtrusive JavaScript执行此操作。

（并且不要仅使用input作为显示输出的元素，它没有意义。你可能想要使用与textarea关联的标签......并且使用<b>Comments</b><br />Please leave any comments that you think will help anyone else.）的其他标签

Answer 2

这对你有用吗？ Example Link

编辑：
您应该在函数中使用函数call onkeyup="limiter(this)"传递元素实例，您将对调用此函数的对象进行引用，现在您的函数将类似于：

function limiter(a) {
    var comment = a;
    var form = document.getElementById('add-course-rating');
    var tex = comment.value;
    var len = tex.length;
    if (len > count) {
        tex = tex.substring(0, count);
        comment.value = tex;
        return false;
    }
    form.limit.value = count - len;
}

如果你真的不需要，也不需要动态创建元素！所以只需使用Javascript设置readonly的值：

<input type="text" name="limit" id="limit" size="4" readonly value="">
<script type="text/javascript">
  var limit = document.getElementById('limit');
  limit.value = count;
</script>

你很高兴去！

无法获取document.getElementById（）来查找我的textarea

2 个答案: