Microsoft Edge：如何处理带有文本对齐错误的占位符答案

【问题标题】：Microsoft Edge: How to handle placeholder with text-align bugMicrosoft Edge：如何处理带有文本对齐错误的占位符
【发布时间】：2017-08-14 19:41:32
【问题描述】：

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

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4468563/

https://connect.microsoft.com/IE/feedback/details/1743283/microsoft-edge-placeholder-with-text-align-right-bug

现场演示：http://jsfiddle.net/z4fkev4v/

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

.right {
text-align: right;
}

有没有办法解决这个问题？

【问题讨论】：

在 Microsoft Edge 38.14393.0.0 上不会发生在我身上
占位符对齐正确但光标仍然在左侧
是的，我明白了...光标在 Edge 中我的右侧
奇怪..和你一样的版本..

标签： css input microsoft-edge placeholder text-align

【解决方案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

【讨论】：

【解决方案2】：

只是想添加来自@DMCISSOKHO 的代码的修改版本。这将检查 Microsoft Edge，然后仅使用占位符附加到所有输入。当调用 focusout 时，它也会使用占位符。我确信它可以修改为不使用 jQuery，但这对我来说不是必需的。

// 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", "");
      }
    });
  });
}

<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" />

【讨论】：