根据字符数突出显示子文本

Question

基本思路是高亮输入中指定长度值后的字符，同时显示提示信息。

我们开始吧：

<div id="test_box">
   <input type="text" id="text_text">
</div>

css:

 #notice {
    width: 140px;
    height: 40px;
    background-color: black;   

    }
 #test_box {
       width: 400px;
       height: 400px;

 }

和 jQuery 代码：

$(document).ready(function() {
        var length = $('#text_text').val().length; 
        var char_limit = 5;       
        $('#text_text').bind('keyup', function() {
            new_length = $('#text_text').val().length;
            if (new_length > char_limit) {
              $('#text_text').css('color','red');
                $('#test_box').append('<div id="notice"> There are limit of character for home page title of this field </div>'); // wrong too much divs :/

            } else {
               $('#text_text').css('color', 'black');
               $('#notice').hide(); //wrong             
            }
        });
 });

目前在char_limit 之后突出显示的字符被超过，我需要的是只突出那些在char_limit 之后的字符。并且还注意到如果我每次输入字符都会添加块，我认为我应该手动创建该 div 或者可能不创建，并在超过 char_limit 时以某种方式显示它。

Answer 1

突出显示文本的某些部分并非不可能，因为您可以通过选择突出显示它。

看看这个：http://jsfiddle.net/9BrpD/3/

$(document).ready(function(){
    var input = $('#text_text');
    var warning = $('#warning');
    input.on('keyup', function(){
       var val = $(this).val();
        if ( val.length > 3 ) {
            warning.html('hello').css('display', 'block');
            l = val.length
            var input = document.getElementById("text_text");
            input.setSelectionRange(l-3, l);
            input.focus();
        }
        else {
             warning.css('display', 'none');
        }
    });   

});​

它还解决了您重复 div 的问题。但是，我觉得这个解决方案对用户不是很友好。您可以尝试将焦点移到输入字段之外，但仍然不能完全令人满意。

Answer 2

我不确定您所说的“突出显示”超过 char_limit 的字符是什么意思。如果您想将样式应用于输入文本的一部分，那么这是不可能的：样式将应用于整个输入。您可以尝试使用 span 和一些 javascript 来模拟输入字段来监听键盘事件。这在this answer to a similar question as yours 中有解释。

对于通知，确实，您不应该每次都添加它。它应该在您的 HTML 中，带有 css“display:none”，并在适当的时候显示和隐藏。

<div id="test_box">
    <input type="text" id="text_text">
    <div id="notice"> There are limit of character for home page title of this field </div>
</div>

--

#notice {
    width: 140px;
    height: 40px;
    background-color: black;   
    display:none;
}

--

$(document).ready(function() {
    var length = $('#text_text').val().length; 
    var char_limit = 5;       
    $('#text_text').bind('keyup', function() {
        new_length = $('#text_text').val().length;
        if (new_length > char_limit) {
          $('#text_text').css('color','red');
            $('#notice').show();

        } else {
           $('#text_text').css('color', 'black');
           $('#notice').hide();          
        }
    });

});

Here is a JSFiddle 使用该代码。