Question

我在Asp.net c#工作。我有一项任务要清除textbox上的多个button click，但现在根据要求我必须使用JAVASCRIPT。所以我不能用C#代码做到这一点。现在我使用以下内容：

JAVASCRIPT 功能：

function clrCtrl() {
    document.getElementById('TextBox1').value = "";

}

用这种方法线越大。现在，当我有20 30的文本框时，这段代码效率不高，所以请给我任何建议......

Answer 1

您是否考虑过使用JQUERY？ Jquery选择器有不同的组合，可以帮助您更轻松地重置基于CSS类，控件类型，使用“喜欢”的控件。

http://api.jquery.com/button-selector/

以下是jquery页面的示例：

<input class="myClass" name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

<script>
     $( "input[name*='man']" ).val( "has man in it!" );
     $( ".myClass" ).val("setting value based on class")
</script>

Answer 2

将类名提供给要清除的文本框，然后尝试使用

document.getElementsByClassName("MyTestClass")获取元素并使用你的逻辑做任何你想做的事。

例如： -

function clrCtrl() {

    var elements = [] ;
    elements = document.getElementsByClassName("MyTestClass");

    for(var i=0; i<elements.length ; i++){
       elements[i].value = "" ;
    }

}

希望这有帮助。

亲切的问候。

Answer 3

如果您使用的是jQuery，可以在每个文本框中添加类似文本框的样式类，然后执行$('.textbox').val(''); 你的HTML看起来像对于每个文本框<asp:TextBox runat="server" ID="TextBox" CssClass="textbox" />，请确保包含CssClass="textbox"

Answer 4

您应首先收集要清除的输入元素，然后循环播放它们以删除其内容：

function clrCtrl() {

    var elems = [] ;
    elems = elems.concat(document.getElementsByTagName("input"));
    elems = elems.concat(document.getElementsByTagName("textarea"));
    //and so on

    for(var i=0,c=elems.length ; i<c ; i++){
       elems[i].value = "" ;
    }

}

如果你想对它们进行分组，我还建议给这些元素提供一个公共className：

function clrCtrl(groupName) {

    var elems = [] ;
    elems = elems.concat(document.getElementsByTagName("input"));
    elems = elems.concat(document.getElementsByTagName("textarea"));

    for(var i=0,c=elems.length ; i<c ; i++){
       if(elems[i].className==groupName){elems[i].value = "" ;}
    }

}

或者，如果您只定位现代浏览器，则可以使用“getElementsByClassName”方法：

function clrCtrl(groupName) {

    var elems = document.getElementsByClassName(groupName) ;

    for(var i=0,c=elems.length ; i<c ; i++){
       elems[i].value = "" ;
    }

}

Answer 5

<html>
<head>

<script>
function funClear() {

    document.getElementById("form1").reset();

} 

</script>
</head>

<body>
<form id="form1">
Name:<input type="text" id="txt"><br><br>
Email:<input type="text" id="txt"><br><br>
Phone:<input type="text" id="txt"><br><br>
Message:<input type="textarea" height="50" width="70" id="txt"><br><br>

<input type="button" name="clear"value="clear" onclick="funClear()">

</form>
</body>
</html>

按钮单击时使用JavaScript清除多个文本框

5 个答案: