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

Z时代
2024-01-10
分类：问答

基本思想是突出显示输入中指定长度值后的字符，并显示通知消息。根据字符数突出显示子文本

这里，我们去：

<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时以某种方式显示它。

回答：

我不确定“突出显示”超过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与该代码。

回答：

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

检查了这一点：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'); 
     } 
    }); 
});