Есть такая верстка
<li>
<div class="show-task">
<input type="checkbox">
<label class="">Task 1</label> <a href="#" class="delete-task">X</a>
</div>
<div class="edit-task">
<form>
<input type="text" value="" class="form-field-2">
</form>
</div>
</li>
Блок edit-task
изначально скрыт (display: none;
), блок show-task
отображается.
При клике на label
в блоке show-task
блок show-task
нужно скрыть, и вместо него показать блок edit-task
, и в инпут, что внутри него, поставить фокус, и отобразить значение, которое было в label
в show-task
.
Не получается задать фокус на инпуте и отобразить в нем значение из лейбла http://jsfiddle.net/FY8WW/6/, подскажите, как можно это сделать?
$(document).ready(function () {
$("a").attr("hideFocus", "true");
$('.show-task input[type=checkbox]').click(function () {
$(this).parent('.show-task').find('label').toggleClass('marked-task');
});
$('.show-task').hover(function () {
$(this).children('.delete-task').toggleClass('visible');
});
$('.show-task label').click(function () {
var value = $(this).html();
$(this).parent('.show-task').addClass('inactive');
$(this).closest('li').find('.edit-task').addClass('active').find('form-field-2').focus().val(value);
});
});
a {
text-decoration: none;
}
ol, ul {
list-style: none;
}
.task-list {
width: 300px;
}
.task-list li {
padding: 25px 0 16px 0;
border-top: 1px solid #bfbfbf;
font-size: 0.9em;
}
.task-list li:first-child {
border-top: 0;
}
.show-task {
overflow: hidden;
}
.show-task {
overflow: hidden;
}
.show-task.inactive {
display: none;
}
.marked-task {
text-decoration: line-through;
}
.delete-task {
float: right;
display: none;
color: #0000ee;
cursor: pointer;
}
.delete-task:active {
color: #ff0000;
cursor: pointer;
}
.delete-task.visible {
display: block !important;
}
.edit-task {
display: none;
}
.edit-task.active {
display: block;
}
.form-field-2 {
font-size: 0.9em;
margin: 0.25em 0 0.25em 0;
padding: 8px;
border: 1px solid #FFA500;
color: #A9A9A9;
width: 280px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="task-list">
<li>
<div class="show-task">
<input type="checkbox">
<label class="">Task 1</label> <a href="#" class="delete-task">X</a>
</div>
<div class="edit-task">
<form>
<input type="text" value="" class="form-field-2">
</form>
</div>
</li>
<li>
<div class="show-task">
<input type="checkbox">
<label class="">Task 2</label> <a href="#" class="delete-task">X</a>
</div>
<div class="edit-task">
<form>
<input type="text" value="" class="form-field-2">
</form>
</div>
</li>
<li>
<div class="show-task">
<input type="checkbox">
<label class="">Task 3</label> <a href="#" class="delete-task">X</a>
</div>
<div class="edit-task">
<form>
<input type="text" value="" class="form-field-2">
</form>
</div>
</li>
</ul>