Question

我想以一种方式设置输入文本字段的样式，如果我在输入字段中键入两个单词，则第一个单词的下边框为黑色，第二个单词的下边框为红色（类似于youtrack）。欢迎任何提示

Answer 1

好。我已经为你准备了一个演示版，因为我喜欢这个问题：D.它的实现很糟糕，因为它不支持特殊键，但这肯定是你的起点。

这是js fiddle。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();
  }

Youtrack喜欢文字造型

1 个答案: