如何使用 Javascript 单按 Backspace 键清除文本框？

Posted 2023-05-07

【中文标题】如何使用 Javascript 单按 Backspace 键清除文本框？

【英文标题】：How to clear a textbox on single press of Backspace key using Javascript?

【发布时间】：2012-07-27 19:43:36

【问题描述】：

我正在开发一个包含文本框的 Web 应用程序。文本框的值由日期选择器填充，其属性默认为只读。到目前为止，一切正常。但是当我按下退格键时会出现问题。它不是清除文本框，而是将我重定向回上一页。

我通过参考本网站上的一些先前答案，通过 javascript 函数处理了这种情况。

 function allowBackSpace(val) 
    var keyCodeEntered = (event.which) ? 
                             event.which : 
                             (window.event.keyCode) ? 
                                 window.event.keyCode : 
                                 -1;
    if (keyCodeEntered == 8) 
        $(this).val(""); 
        return true;
    
    return false;
   

更新：调用此函数

<asp:TextBox ID="txtDate" 
             Style="margin-left: 5px; margin-right: 5px" 
             runat="server"
             Width="88px" 
             onkeypress="return allowBackSpace(this);">
</asp:TextBox>

我在文本框的按键事件中调用这个函数。问题是它一次只允许删除一个字符。

如果用户按下退格按钮，我希望清除整个文本框。卡在这里如何实现这一点。

提前致谢 阿基尔

PS：任何使用 C# 代码实现此目的的方法也会非常有帮助。

【问题讨论】：

你能发表一些关于这段代码的解释吗？例如，val 的论点是什么？

您是否尝试过将焦点返回到该文本框？

有时退格事件取决于浏览器的兼容性。您使用的是哪个浏览器？？

@JibiAbraham 我已经更新了代码

@JohnnBlade 不，我没试过。你能用一些代码解释一下吗？

【参考方案1】：

您正在从 js 函数返回 true，该函数也执行其按键事件。因此，尝试返回 false。 你可以试试下面的代码：

函数allowBackSpace(val)

var keyCodeEntered = 
     (event.which) ? event.which : 
                 (window.event.keyCode) ? window.event.keyCode : -1;
if (keyCodeEntered == 8) 

     $(this).val("");
     return false;
 
 return false; 

【讨论】：

抱歉没用。我也已将调试器附加到此功能。它甚至没有在退格或按下 dlelete 按钮时调用 javascript 函数。

【参考方案2】：

试试这个功能。

 $("#txt1").keydown(function(eve)
    var keyCodeEntered = eve.keyCode? eve.keyCode : eve.charCode;

    if (keyCodeEntered == 8) 
    
         $(this).val("");
         return false;
     
     return false;
  );
);

【参考方案3】：

使用 Jquery

$("#txtDate").keyup(function(event)
    if(event.keyCode == 8)
        $("#txtDate").val("");
        return false;
    
);

【参考方案4】：

function allowBackSpace(e,obj)

    var evt=e||window.event;
    if(evt.keyCode==8)
    
        obj.value='';
    

现在，使用 onkeydown 事件而不是 onkeypress

<textarea onkeydown='allowBackSpace(event,this)'></textarea>