Reputation: 713
I have a text template like this:
I live in the middle of the {sea|city}, and I am {happy|sad}.
I need a text input where the user will be able to edit the text but instead of {sea|city} or any other similar pattern there should be a dropdown to pick one of available options, also the user should be able to delete the dropdown by pressing backspace when editing text
But in case the user decides to delete the dropdown, the token {sea|city} should be removed from the original text as well so I can save the edited text.
I tried to split the text so that I have a dropdown where it is needed and multiple text inputs for the text, but this makes the text hard to edit because the user has to jump from one input to another, I need to make the user feel like it is one whole input not multiple separated inputs.
Are there any approaches or libraries that I ca use for that ?
Upvotes: 0
Views: 186
Reputation: 713
I ended up using contenteditable=true
flag for container div
, it allows typing and removing inside content. Also for the dropdowns which are more complex - div
s with multiple layers of children inside I had to use contenteditable=false
to allow removing the entire div
at once after pressing backspace. For example:
<div contenteditable=true>
Some text <div contenteditable=false>complex dropdown</div> more text.
</div>
Upvotes: 0
Reputation: 1751
Maybe create a custom dropdown with a close button somewhere to make all the text cursive..
and getText function is ugly, I know.. :( but atm i don't have any idea how to make it better (if you delete one dropdown the other one will not have the close button because it's based on class, but since you can create a separate component, this will work..)
// this could be done way more nicer but i don't know how..
function getText(selected) {
let text = $('#place').text();
// first dropdown
if (selected === 'sea' || selected === 'city') {
text += ' ' + selected + $('#feeling').text() + ' ' + $('#feeling-select').find(":selected").text();
// second dropdown
} else if (selected === 'happy' || selected === 'sad') {
text += ' ' + $('#place-select').find(":selected").text() + $('#feeling').text() + ' ' + selected
} else {
// removed dropdown
text += $('#place-select').find(":selected").text() + $('#feeling').text() + $('#feeling-select').find(":selected").text();
}
console.log(text)
}
$('.delete-option').click(function() {
$('.delete-option').remove()
$('#place-select').remove()
getText(null)
});
$("select.option").change(function(event) {
const selected = $(this).children("option:selected").text();
getText(selected);
});
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
#place-select,
#feeling-select {
border: none;
color: orange;
}
.delete-option {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<label for="place" id="place">I live in the middle of the</label>
<select name="place" id="place-select" class="option">
<option value="sea">sea</option>
<option value="city">city</option>
</select>
<!-- use icon and place at top -->
<span class="delete-option"> x </span>
<label for="feeling" id="feeling"> and I am </label>
<select name="feeling" id="feeling-select" class="option">
<option value="happy">happy</option>
<option value="sad">sad</option>
</select>
<!-- use icon and place at top -->
<span class="delete-option"> x </span>
</div>
Upvotes: 1