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的字符。如果要将样式应用于输入文本的一部分，则不可能：样式将应用于整个输入。您可以尝试使用跨度和一些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使用该代码。

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

2 个答案: