放置元素的runat ="server"时ASP.NET javascript代码不起作用

Question

我html和javascript代码工作正常.但是当我把它放进去时asp.net,javascript代码无效.

我的html代码是......

 <div class="form-group">
        <label class="col-md-3 col-xs-12 control-label">Work Completed</label>
        <div class="col-md-6 col-xs-12">  
            <div class="input-group">
                <span class="input-group-addon">%</span>
                <input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server"/>
            </div>
        </div>

    </div>
    <div class="form-group">
        <label class="col-md-3 col-xs-12 control-label"></label>
        <div class="col-md-6 col-xs-12">                                                                                                                                        
            <div class="progress progress-thick progress-striped active">
                <div id="p_bar" class="progress-bar progress-bar-success" role="progressbar" ></div>
            </div>
        </div>
    </div>

而javascript代码是

<script type="text/javascript">
    function changeDiv() {
        tval = document.getElementById('tval').value;
        document.getElementById('p_bar').setAttribute("style", "width:" + tval + "%");
    }
</script>

这非常有效.上面的代码是progressbar (id="p_bar")使用文本框(id="tval")输入更改值, progressbar范围随值增加或减少.

但是当我输入runat="server"时<input type="text">,代码无效.

我无法找到解决方案.

请帮我.

Answer 1

通过ClientIDMode="Static"在服务器控件中使用,它不会ID在Page Render上更改该元素,因此您现有的javascript/jquery将起作用.

所以替换这个: -

<input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server"/>

同

<input type="text" class="form-control" name="" id="tval" oninput="changeDiv()" runat="server" ClientIDMode="Static"/>

要么

如果你不想使用 ClientIDMode="Static"

请在您使用的任何地方更换您的ID runat="server",如下所示: -

tval = document.getElementById('<%=tval.ClientID%>').value;