你喜欢文本样式

Youtrack like text styling

本文关键字：样式 文本 喜欢      更新时间：2023-09-26

我想样式我的输入文本字段的方式，如果我在输入字段中键入两个单词，第一个单词的下边框是黑色的，第二个单词的下边框是红色的(类似于你的轨道)。欢迎有任何提示

好吧。我为你准备了一个演示，因为我喜欢这个问题:D。它的实现很糟糕，因为它不支持特殊键，但这对你来说肯定是一个起点。

这是js提琴。http://jsfiddle.net/madterry/jwq53/

HTML: 

 Enter :<div id="madText" contenteditable="true"></div>
CSS: 

#madText {
    border-left: 1px solid darkgray;
    font: -moz-field;
    font: -webkit-small-control;
    padding: 2px 3px;
    width: 398px;    
}
jQuery: 

  $('#madText').on('keyup',function(e){
    e.preventDefault();
    //Find all child span & replace with text
    $(this).find('span').each(function() {
        $(this).replaceWith($(this).text());
    });
    //Find all words
    var words = $(this).html().trim().split(' ');
    //Clear the data 
    $(this).html('');
    //for all words
    for (i = 0; i < words.length; i++){
        //Even odd game :D
       if ((i+1)%2 == 0) {
         $(this).append(' <span style="border-bottom: 3px solid;border-bottom-color:red;">' + words[i] + '</span>');
       } else {
        $(this).append(' <span style="border-bottom: 3px solid;border-bottom-color:green;">' + words[i] + '</span>');
       }
    }
    //Set cursor to end
    if($(this).find('span').length>0) setCursorToEnd($(this).find('span').last()[0]);
 return false;
});
//Foun it on google :D
function setCursorToEnd(ele)
  {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }
相关文章：