Question

我有一个选择菜单，当用户进行选择时，它会触发对PHP脚本的AJAX请求以查询数据库并返回与选择匹配的值并将其插入到关联的输入字段中。如果没有返回匹配值，则清除相关的输入字段。

这一切都运行良好，但我刚刚意识到当输入字段为空时没有匹配值时会出现默认的占位符文本。我需要在清除输入字段的同时清除占位符文本，但到目前为止还没有想出办法。

这是调用PHP脚本并更新输入字段的AJAX代码：

$(document).ready(function() {
  $("#smsFromName").change(function() {
    var smsFromName = $("#smsFromName").val();
    console.log(smsFromName);
    $.post('getSMSSender.php', {
      senderName: smsFromName
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        alert("error");
        $("#smsFrom").html('');
        return; // stop executing this function any further
      } else if (data[0] && data[0].senderMobile) {
        console.log(data[0].smsFrom);
        $("#smsFrom").val(data[0].senderMobile);
      } else {
        console.log(data[0].smsFrom);
        $("#smsFrom").val("");
      }

    }).fail(function(xhr) {
      $("#smsFrom").html('');
    });
  });
});

这是HTML输入字段：

<input type="text" class="form-control w48" name="smsFrom" id="smsFrom" placeholder="0412 345 678" value="0417 555 666">

我希望我可以在之后添加一些代码：

$("#smsFrom").val("");

还要清除占位符文本，但我很难过如何做到这一点？

Answer 1

VanillaJS

你可以在这里轻松使用vannila.js ......

document.getElementById("myText").placeholder = "";

所以它会是：

$(document).ready(function() {
  $("#smsFromName").change(function() {
    var smsFromName = $("#smsFromName").val();
    console.log(smsFromName);
    $.post('getSMSSender.php', {
      senderName: smsFromName
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        alert("error");
        $("#smsFrom").html('');
        return; // stop executing this function any further
      } else if (data[0] && data[0].senderMobile) {
        console.log(data[0].smsFrom);
        $("#smsFrom").val(data[0].senderMobile);
      } else {
        console.log(data[0].smsFrom);
        $("#smsFrom").val("");
        document.getElementById("myText").placeholder = "";
      }

    }).fail(function(xhr) {
      $("#smsFrom").html('');
    });
  });
});

的jQuery

你也可以在这里轻松使用jQuery ..

$("#smsFrom").attr('placeholder', '').html("");

所以它会导致......

$(document).ready(function() {
      $("#smsFromName").change(function() {
        var smsFromName = $("#smsFromName").val();
        console.log(smsFromName);
        $.post('getSMSSender.php', {
          senderName: smsFromName
        }, function(data) {
          data = JSON.parse(data);
          if (data.error) {
            alert("error");
            $("#smsFrom").html('');
            return; // stop executing this function any further
          } else if (data[0] && data[0].senderMobile) {
            console.log(data[0].smsFrom);
            $("#smsFrom").val(data[0].senderMobile);
          } else {
            console.log(data[0].smsFrom);
            $("#smsFrom").val("");
            $("#smsFrom").attr('placeholder', '').html("");
          }

        }).fail(function(xhr) {
          $("#smsFrom").html('');
        });
      });
    });

结论

两种方式都有效。您可以使用jQuery，因此它可以是类似的代码类型，也可以是VanillaJS For Performance。希望这有帮助！

Answer 2

如果您确实需要更改占位符文字，请替换当前的语句

$("#smsFrom").val("");

width一个链式函数来改变占位符文本，就像这样;

 $("#smsFrom").attr('placeholder', '').html("");

AJAX请求 - 还清除占位符文本以及HTML输入字段值

2 个答案:

VanillaJS

的jQuery

结论