放置元素的 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>

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

但是当我将runat="server" 放入<input type="text"> 时，代码不起作用。

我找不到解决办法。

请帮帮我。

Answer 1

通过在您的服务器控件中使用ClientIDMode="Static"，它不会更改页面渲染上该元素的ID，因此您现有的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"

请在您使用 runat="server" 的任何地方替换您的 ID，如下所示：-

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

Answer 2

当您将文本框创建为服务器控件时，您必须添加 ClientID。

所以试试这个，

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

Answer 3

由于输入标签是一个html标签（标记语言）你不能使用asp.net runat属性，而是你可以使用

例子：<asp:Label runat="server">如果合适的话。

Answer 4

如果您需要使用runat="server"，请尝试使用类名而不是 id 来调用它。
如：

$('.classname').val();

或：

document.getElementsByClassName("classname");