Question

一旦jquery填充的跨度达到宽度限制，我就无法将输入文本变为红色。我正在使用此输入框填充固定宽度的PDF单元格，因此我将div格式化为与PDF中输出的字体，大小和重量相同，我知道PDF单元格的固定宽度为226.

请附上http://jsfiddle.net/q5hdL/6/小提琴。当我的css被注释掉时，文本颜色变为红色，但在取消注释时无法变为红色。

P.S。这是我的第一个小提琴。

JQUERY代码（如上所述，css注释掉了）

    $(document).ready(function(){
        $('#custName').keyup(function(){
            var desc = $(this).val();
            var cache = $(this);
            $('#arial12B').html(desc).promise().done(function(){
                if($('#arial12B').width() > 226){
                    cache.css("color", "#ff0000");
                }
            });
        });
    });

HTML代码

    <div id="inputSetBottomLeft">
        <input id="custName" name="custName" type="text" class="custInput" value="' . $customerName . '" />
        <div id="custNameHidden">
            <span id="arial12B">Some test text</span>
        </div>
    </div>

CSS代码

    .custInput{
        font-family: 'Open Sans', sans-serif;
        color:#cccccc;
        width:228px;
        font-size:12px;
        padding:8px 12px;
        border:1px solid #cccccc;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        -o-border-radius:3px;
     }
    .custInput:focus{
        color:#4c4c4c;
        border:1px solid #9ad065;
    }
    #custNameHidden{
        display:block;
        width:226px;
        background-color:#cccccc;
    }
    #arial12B{
        font-family:Arial;
        font-size:12px;
        font-weight:bold;
    }

提前致谢。

Answer 1

这适用于所有浏览器：

DEMO jsFiddle

$(document).ready(function () {
    $('#custName').keyup(function () {
        var desc = this.value;
        var cache = $(this);
        $('#arial12B').html(desc);
        if ($('#arial12B').width() > 226) {
            cache.attr("style", "color:#ff0000 !important");
        }
    });
});

我的css阻止了我的JQUERY执行DOM更改

1 个答案: