AJAX 请求 - 同时清除占位符文本以及 HTML 输入字段值答案

【问题标题】：AJAX Request - Also Clear Placeholder text as well as HTML input field valueAJAX 请求 - 同时清除占位符文本以及 HTML 输入字段值
【发布时间】：2016-07-10 14:54:17
【问题描述】：

我有一个选择菜单，当用户进行选择时，它会向 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 输入字段：

&lt;input type="text" class="form-control w48" name="smsFrom" id="smsFrom" placeholder="0412 345 678" value="0417 555 666"&gt;

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

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

还要清除占位符文本，但我不知道该怎么做？

【问题讨论】：

为什么？占位符文本仍然适用，确定吗？
如果您真的必须清除占位符文本，并且它是通过占位符属性设置的标准占位符，请尝试$("#smsFrom").attr('placeholder', '').html("");
@Quentin 占位符文本是页面加载时动态加载的默认值，一旦做出不同的选择就会不正确。我明白你在说什么 - 如果我无法更新它，我可能需要将占位符文本更改为更通用的值

标签： javascript html ajax

【解决方案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。希望这有帮助！

【讨论】：

混合 jQuery 和原生 DOM API 的意义何在？要么用 jQuery 编写所有东西，要么根本不使用它。
我说最好推荐的是DOM API。有些人可能想要。这根本不值得投反对票@Gothdo
在这样的基本代码中，DOM API 和 jQuery 之间的性能没有任何显着差异。此外，如果 OP 在其代码中使用 jQuery，您还应该使用 jQuery 提供答案。而且我可以随心所欲地投票，不要告诉我什么值得反对，什么不值得。

【解决方案2】：

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

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

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

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

【讨论】：