Как я могу использовать этот квадратный курсор (изображение ниже) во входных тегах?
Как я могу использовать этот квадратный курсор (изображение ниже) во входных тегах?
Я изменил способ работы, и, похоже, он решает несколько проблем:)
Обычные оговорки применяются до сих пор, прежде всего неспособность визуально видеть, где находится карет.
Я думаю, длинный и жесткий, стоит ли это решение реализовать, исходя из его недостатков и проблем с удобством использования.
$(function() {
var cursor;
$('#cmd').click(function() {
$('input').focus();
cursor = window.setInterval(function() {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({
visibility: 'hidden'
});
} else {
$('#cursor').css({
visibility: 'visible'
});
}
}, 500);
});
$('input').keyup(function() {
$('#cmd span').text($(this).val());
});
$('input').blur(function() {
clearInterval(cursor);
$('#cursor').css({
visibility: 'visible'
});
});
});
#cmd {
font-family: courier;
font-size: 14px;
background: black;
color: #21f838;
padding: 5px;
overflow: hidden;
}
#cmd span {
float: left;
padding-left: 3px;
white-space: pre;
}
#cursor {
float: left;
width: 5px;
height: 14px;
background: #21f838;
}
input {
width: 0;
height: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmd">
<span></span>
<div id="cursor"></div>
</div>
<input type="text" name="command" value="" />
AFAIK, что невозможно для текстового окна html, вы можете стилизовать сам вход, но вы ничего не можете сделать о курсоре, кроме применения уже доступных параметров курсора: (
Для тегов <input>
вы не можете сделать это. Если вы не возражаете, что это ужасный хак, вы всегда можете использовать JavaScript для изменения размера текстового поля (установите width = *something* * count
) и <img>
с курсором вправо.
Я не думаю, что есть меньше решений "ugh", бар, обрабатывающий ввод текста самостоятельно, что, вероятно, слишком велико.
вы не можете. что означает: вы можете сделать это самостоятельно, используя шрифт с фиксированным шрифтом, используйте мигающий фон gif als, положение которого задано динамически, вычисляя с уже набранным текстом, - но над вашим gif будет "нормальный" курсор, делая это решение уродливым
Вам нужно было бы 1) свернуть свое собственное текстовое поле и 2) скрыть реальный курсор, постоянно фокусируя его в другом месте. Затем запишите ключевые события на уровне документа/тела и вставьте это значение в свой собственный элемент. Тогда курсором будет анимированный GIF, который всегда был расположен в правой части вашего текстового поля.
У вас возникнут проблемы с №2, и все это вообще нецелесообразно. HTML 5 открывает некоторые новые возможности, но для курсора все еще очень много работы.