连字符最后一个字符时 substr() 失败

Question

我正在创建一个站点，用户可以在其中单击看起来像 phone 拨号盘的 DIV。当有 3 个或 7 个字符时，我添加一个连字符来模拟 phone 数字的外观。

但是，当他们按下退格按钮时，它不会减去连字符。

这是我的代码，删除了所有不必要的代码：

$(".phone_digit").click(function(e){

    var html = "" + $("#input-box").html();

    if( event.target.id == "phone_delete" ){

        if( ( html.length === 5 ) || ( html.length === 9 ) ) {
            $("#input-box").html( html.substr(0, html.length - 2 ) );
        } else {
            $("#input-box").html( html.substr(0, html.length - 1 ) );
        }

        html = "" + $("#input-box").html();

    } else if ($("#input-box").html().length < 12) {
        $("#input-box").html( html + "" + $("#" + event.target.id).html() );
        html = "" + $("#input-box").html();
    }

    if( ( $("#input-box").html().length === 3 ) || ( html.length === 7 ) ) {
        $("#input-box").html( $("#input-box").html() + "&#45;");
        html = "" + $("#input-box").html();
    }
})

一件奇怪的事：如果我将长度参数从“5”和“9”更改为“4”和“8”，代码将减去连字符。但这并不理想，因为它会在 #input-box 中留下悬垂的连字符，直到您添加或减去另一个数字。

这里是 fiddle： https://jsfiddle.net/mediocreb/t66jf0t4/3/

Answer 1

它正在运行，但您的条件已关闭。您可以很好地删除连字符，但随后又将其放回最后的 "if" 块中。

将您的最终 "else" 改为这样检查：

  if (event.target.id !== "phone_delete" && (($("#input-box").html().length === 3) || (html.length === 7))) {

连字符最后一个字符时 substr() 失败

substr() fails when hyphen last character

jquery

substr

string-length