文本框中的占位符和光标对齐对齐答案

【问题标题】：Placeholder and cursor alignment alignment in Textbox文本框中的占位符和光标对齐对齐
【发布时间】：2014-10-29 23:59:20
【问题描述】：

我有一个包含文本框的 HTML“表单”，这里我们显示了一些占位符（默认文本）。

根据requiremnet默认文本显示为居中对齐。一旦我们居中对齐，光标也显示居中本身。是否有任何解决方案可以显示光标以启动自身（左对齐）和占位符用于居中对齐。

占位符和光标对齐

【问题讨论】：

标签： javascript html css placeholder

【解决方案1】：

用原版 CSS 重写 bl2b's answer

selector {
    text-align: center;
}

selector:focus {
    text-align: left;
}

【讨论】：

【解决方案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');
    })


})

【讨论】：

【解决方案3】：

你可以用 jquery 覆盖它

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

【讨论】：

感谢您的解决方案。我根据我的要求做了一些更改。它对我帮助很大。