Два пролета в одной строке
У меня есть "div" с двумя "span". «Span» берет текст, введенный пользователем, и отправляет его в серверную часть для создания следующего текста (аналогично автозаполнению). Второй «промежуток» — это возврат текста, сгенерированного моделью, что было бы дополнительным предложением. Как вы можете видеть на рисунке ниже.
Проблема в том, что иногда текст второго затирается и мешает визуализации. Я хотел бы увидеть способ поместить текст второго «промежутка» перед первым «промежутком».
Я уже пытался использовать «padding-left» во втором «промежутке», но в какой-то момент первый «промежуток» перезаписывает его.
Ниже приведены коды:
HTML -->
<template>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<div class = "pad-container">
<div tabindex = "1" @focus = "setCaret" class = "divAutocomplete">
<span @input = "sendText" @keypress = "preventInput" ref = "editbar" class = "editable" contenteditable = "true" placeholder='Digite sua busca'></span>
<span class = "placeholder" data-ondeleteId = "#editx" contenteditable = "false">{{String_Text}}</span>
</div>
</div>
</template>
CSS -->
<style scoped>
.pad-container {
padding: 0;
width: 640px;
border-radius: 12px;
border: medium solid;
border-color: #0072c6;
},
.divAutocomplete {
font-family: "Crete Round";
font-size: 16px;
border-radius: 8px;
height: 32px;
width: 100%;
text-align: left;
position: relative;
background-color: hwb(244 16% 17% / 0.1);
caret-color: #0072c6;
color: #0072c6;
},
span {
display: block;
min-width: 1px;
outline: none;
},
.editable {
position: absolute;
left: 8px;
top: 5px;
text-transform: lowercase;
},
.placeholder {
color: gray;
position: absolute;
left: 8px;
top: 5px;
z-index: -1;
}
</style>
«String Text» — это простой текст, такой как «Hello World» или «Welcome to the White House». Я бы хотел, чтобы это выглядело так, если это возможно:
Так что, когда пользователь вводит текст, второй "промежуток" будет сохранять пробел между первым "промежутком"
Ответы 1
Чтобы предложение оставалось на постоянном расстоянии от редактируемого текста, необходимо:
- убрать
position: absoluteу детей, - подарить родителю
display: flex, - дать второй ребенок
display: inline-blockи малый левый отступ
Вот об этом:
.parent {
padding: 1rem;
border-radius: 12px;
border: medium solid;
border-color: #0072c6;
display: flex;
}
.editable {
min-width: .5rem;
background-color: hwb(244 16% 17% / 0.1);
caret-color: #0072c6;
color: #0072c6;
font-weight: bold;
outline: none;
}
.suggestion {
padding-left: .5rem;
display: inline-block;
}<div class = "parent">
<div class = "editable" contenteditable>This is the editable text...</div>
<div class = "suggestion">This is the dynamic suggestion...</div>
</div>Если вы хотите, чтобы предложение отображалось первым, добавьте
flex-direction: row-reverse;
justify-content: flex-end;
родителем и переместите padding-left в предложении на padding-right.
В качестве альтернативы вы можете изменить их положение в DOM (что означало бы, что единственным дополнительным правилом будет изменение стороны заполнения в предложении).
Обратите внимание, что это будет держать двух дочерних элементов рядом, даже когда любой из них должен быть обернут:
.parent {
padding: 1rem;
border-radius: 12px;
border: medium solid;
border-color: #0072c6;
display: flex;
}
.editable {
min-width: .5rem;
background-color: hwb(244 16% 17% / 0.1);
caret-color: #0072c6;
outline: none;
}
.suggestion {
padding-left: .5rem;
display: inline-block;
}<div class = "parent">
<div class = "editable" contenteditable>
Kitty scratches couch bad kitty do doodoo in the litter-box, clickityclack on the piano, be frumpygrumpy why use post when this sofa is here, instead of drinking water from the cat bowl, make sure to steal water from the toilet cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers freak human out make funny noise mow mow mow mow mow mow success now attack human
</div>
<div class = "suggestion">This is the dynamic suggestion...</div>
</div>И последнее, но не менее важное: вам следует избегать повторного изобретения велосипеда при создании пользовательского интерфейса. Интуитивно понятный шаблон для проблемы пользовательского интерфейса, которую вы пытаетесь решить, состоит в том, чтобы открыть прокручиваемый раскрывающийся селектор под редактируемым элементом и сделать предложения доступными с помощью стрелок вверх/вниз. Когда пользователь выбирает предложение и нажимает клавишу ввода, значение ввода изменяется на выбранное предложение без потери фокуса.
Вы также должны учитывать, что элементы contenteditable могут создавать проблемы с доступностью на определенных устройствах, что в некоторых странах является правонарушением при использовании на общедоступных веб-сайтах. Вы можете предпочесть полностью доступные <input /> элементы.
если пролеты продолжают двигаться вправо, что вы хотите, чтобы произошло, когда второй пролёт достигает правой границы?