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

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");