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"，它不会更改Page Render＆amp;上的该元素的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");

在放置元素的runat =＆＃34; server＆＃34;时，ASP.NET javascript代码无效。

4 个答案: