文本框中的佔位符和光標對齊對齊方式

Question

我有一個包含文本框的HTML「表單」，這裏我們展示了一些佔位符（默認文本）。

根據requiremnet默認文本顯示爲中心對齊。一旦我們居中對齊的光標也顯示中心本身。是否有任何解決方案顯示光標開始本身（左對齊）和佔位符中心對齊。

佔位符和光標對準

Answer 1

您可以通過jQuery的

<script> 
    $(function() { 
     $('#inputId').focus(function() { 
      $(this).css('text-align', 'left'); 
     }).blur(function() { 
      $(this).css('text-align', 'center'); 
     }); 
    }); 
</script> 

Answer 2

覆蓋它試試這個哥們。

這裏是演示http://jsfiddle.net/f0xn3wjL/2/

HTML

<input type="text" placeholder="Dummy Text" > 

使用此CSS

input{width:300px; text-align:center} 
::-webkit-input-placeholder { color:green; } 
input:focus{text-align:left; content:''} 

使用這個jQuery

$(document).ready(function(){ 

    $('input').click(function(){ 
    //alert('hi'); 
    $(':input').removeAttr('placeholder'); 
    }) 


}) 

Answer 3

重寫bl2b's answer with vanilla CSS

selector { 
    text-align: center; 
} 

selector:focus { 
    text-align: left; 
}