避免使用textarea blur事件来做工具栏

时间:2016-07-29 19:13:00

标签: javascript jquery html meteor

我为文本区域创建了一个工具栏,我想要做的是在单击工具栏按钮时保持焦点。

我的HTML代码:

<div id='toolBar'>
  <button id="btnItalic" class="btn btn-primary" aria-label="Italic">
    <span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
  </button>    
</div>

<textarea class="form-control postMessage" id="forumSubject-content" name="forumSubject-content" placeholder="Tapez votre message"></textarea>

我的css代码:

#toolBar{
    top: 5px;
    position: absolute;
    z-index: 5;
    left: 30px;
    display: none;
    height: 30px
}

#toolBar button{
    padding: 5px;
    height: 25px;
    width: 25px;
}

我的js(我使用流星但我接受所有答案):

'click #forumSubject-content': function(e, t) {
    $('#toolBar').show();
},
'blur #forumSubject-content': function(e, t) {
    $('#toolBar').hide();
},
'click #btnItalic': function(e, t){
    e.preventDefault();
    $('#toolBar').show();
    var cursorPos = $('#forumSubject-content').prop('selectionStart');
    var cursorPos2 = $('#forumSubject-content').prop('selectionEnd');
    var v = $('#forumSubject-content').val();
    var textBefore = v.substring(0,  cursorPos );
    var textMiddle = v.substring(cursorPos,  cursorPos2 );
    var textAfter  = v.substring( cursorPos2, v.length );
    $('#forumSubject-content').val( textBefore+ "*" + textMiddle + '*' +textAfter );
    return false;
}

提前感谢!

0 个答案:

没有答案