Microsoft Edge：テキストアライメントバグのプレースホルダを処理する方法

Question

プレースホルダ属性を持つ空の入力フィールドで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; 
} 

この問題を解決するための任意の解決策はありますか？

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がチェックされ、プレースホルダ付きのすべての入力にのみ接続されます。また、フォーカスアウトが呼び出されたときにプレースホルダを使用します。私はjQueryを使わないように変更できると確信していますが、それは私の必要条件ではありません。