Fixed border for focused tag input

This commit is contained in:
Marcin Kurczewski 2014-09-18 10:51:12 +02:00
parent b76e4cd1af
commit 80d572622b
2 changed files with 13 additions and 2 deletions

View file

@ -76,6 +76,10 @@ input[type=button]:not(:disabled):hover.highlight {
textarea:focus, input:focus { textarea:focus, input:focus {
outline: none; outline: none;
}
.tag-input.focused,
textarea:focus,
input:not(.tag-real-input):focus {
box-shadow: 0 0 0 1px #5da inset; box-shadow: 0 0 0 1px #5da inset;
border-color: #5da; border-color: #5da;
} }

View file

@ -30,7 +30,7 @@ App.Controls.TagInput = function(
var $wrapper = jQuery('<div class="tag-input">'); var $wrapper = jQuery('<div class="tag-input">');
var $tagList = jQuery('<ul class="tags">'); var $tagList = jQuery('<ul class="tags">');
var $input = jQuery('<input type="text"/>'); var $input = jQuery('<input class="tag-real-input" type="text"/>');
$wrapper.append($tagList); $wrapper.append($tagList);
$wrapper.append($input); $wrapper.append($input);
$wrapper.insertAfter($underlyingInput); $wrapper.insertAfter($underlyingInput);
@ -40,6 +40,13 @@ App.Controls.TagInput = function(
}); });
$input.attr('placeholder', $underlyingInput.attr('placeholder')); $input.attr('placeholder', $underlyingInput.attr('placeholder'));
$input.unbind('focus').bind('focus', function(e) {
$wrapper.addClass('focused');
});
$input.unbind('blur').bind('blur', function(e) {
$wrapper.removeClass('focused');
});
$input.unbind('paste').bind('paste', function(e) { $input.unbind('paste').bind('paste', function(e) {
e.preventDefault(); e.preventDefault();
var pastedText; var pastedText;