Question

Edge中存在一个错误，其中带有占位符属性的空输入字段会忽略text-align属性。

<h3>text-align: right</h3>
<input class="right" type="text" />
<input class="right" type="text" placeholder="wrong cursor alignment" />

.right {
text-align: right;
}

有没有解决方案可以解决这个问题？

Answer 1

您可以使用JS删除焦点上的占位符：

   $(function () {
        $("#TextBox1").focusin(function () {
            $(this).attr("placeholder", "");
        });

        $("#TextBox1").focusout(function () {
            var txtval = $(this).val();
            if (txtval == "") {
                $(this).attr("placeholder", "please input any words");
            }
        });
    })

来源：https://forums.asp.net/t/2065367.aspx?Microsoft+Edge+center+align+input+cursor+on+focus

Answer 2

只是想从@DMCISSOKHO添加修改后的代码版本。这将检查Microsoft Edge，然后仅使用占位符附加到所有输入。它还在调用focusout时使用占位符。我确信它可以修改为不使用jQuery，但这不是我的要求。

＆＃13;

// Bug fix for Microsoft Edge. Inputs with Placeholders and text-aligns other than left.
if (navigator.userAgent.match(/Edge\/(.*)\./)) {
  $(function() {
    $("input[placeholder]").focusin(function() {
      var $this = $(this);
      if ($this.css("text-align").toLowerCase() != "left") {
        $this.attr("data-placeholder", $this.attr("placeholder"));
        $this.attr("placeholder", "");
      }
    }).focusout(function() {
      var $this = $(this),
        tempPlaceholder = $this.attr("data-placeholder");
      if (tempPlaceholder != "") {
        $this.attr("placeholder", tempPlaceholder);
        $this.attr("data-placeholder", "");
      }
    });
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="This is an example" style="text-align: right" />

＆＃13;

Microsoft Edge：如何使用text-align错误处理占位符

2 个答案: