JSFiddle - React, Tailwind, and code Playground
HTML
<div class="text" contenteditable>Текст</div>
<button class="add">add input</button>
CSS
select {
outline: none;
}
.text {
width: 500px;
height: 200px;
border: 1px solid black;
outline: none;
}
.add {
margin-top: 20px;
}
JavaScript
$(document).on('contextmenu', 'select', function(event) {
return false;
});
$('.add').click(function() {
var input = $('<select>', {'class': 'bbb'});
$('.text').append(input);
});
$(document).on('mousedown', 'select', function(e) {
if (e.button == 2) {
var $this = this;
var val = $(this).children('option').map(function(e) {
return $(this).text();
});
var result = prompt('Введите параметры:', val).split(', ');
$.each(result, function (index, el) {
$('<option>', {'value': index, 'text': el}).appendTo($this);
});
return false;
}
return true;
});