javascript - Need to add tags and normal text in same input box -
i need add tags , text in same input box. normal text can delete character @ once. tags selected particular set of words pre defined deleted @ once. normal text , tags on same box.
the link fiddle link far have tried to
document.queryselector('.selectable-icons').addeventlistener('click', function(e) { document.queryselector('[contenteditable]').appendchild(e.target.clonenode(true)); }); document.queryselector('div').addeventlistener('keydown', function(event) { // check backspace if (event.which == 8) { s = window.getselection(); r = s.getrangeat(0) el = r.startcontainer.parentelement // check if current element .label if (el.classlist.contains('label')) { // check if @ end of .label element if (r.startoffset == r.endoffset && r.endoffset == el.textcontent.length) { // prevent default delete behavior event.preventdefault(); if (el.classlist.contains('highlight')) { // remove element el.remove(); } else { el.classlist.add('highlight'); } return; } } } event.target.queryselectorall('span.label.highlight').foreach(function(el) { el.classlist.remove('highlight');}) });[contenteditable] { border: 1px solid #000; margin: 0.4em 0; line-height: 1.4em; -webkit-appearance: textfield; appearance: textfield; } img { vertical-align: top; max-height: 1.4em; max-width: 1.4em; } .selectable-icons img { cursor: pointer; } span.label.highlight { background: #e1ecf4; border: 1px dotted #39739d; } span.label { background: #e1ecf4; border: 1px dotted #39739d; }<p>just click on icon add it.</p> <div class="custom-input"> <div class="selectable-icons"> <span class="label"> tag </span> <span class="label"> tag 2 </span> <span class="label">tag 3</span> </div> <div contenteditable="true"> can type here. add icon. </div> </div>add tags issue when click on tag adds text box , when write text after tag added same span of tag , tag + text deleted rather need text deleted 1 character @ once , tags @ once. please suggest better way achieve textarea instead of div.
note: if change tag data in span editable. reflects in editable div of tags , text
when tag added div, set contenteditable attribute false:
el.setattribute('contenteditable', false); i hope solves problem - see demo below:
document.queryselector('.selectable-icons').addeventlistener('click', function(e) { var el = e.target.clonenode(true); el.setattribute('contenteditable', false); document.queryselector('[contenteditable]').appendchild(el); }); document.queryselector('div').addeventlistener('keydown', function(event) { // check backspace if (event.which == 8) { s = window.getselection(); r = s.getrangeat(0) el = r.startcontainer.parentelement // check if current element .label if (el.classlist.contains('label')) { // check if @ end of .label element if (r.startoffset == r.endoffset && r.endoffset == el.textcontent.length) { // prevent default delete behavior event.preventdefault(); if (el.classlist.contains('highlight')) { // remove element el.remove(); } else { el.classlist.add('highlight'); } return; } } } event.target.queryselectorall('span.label.highlight').foreach(function(el) { el.classlist.remove('highlight'); }) });[contenteditable] { border: 1px solid #000; margin: 0.4em 0; line-height: 1.4em; -webkit-appearance: textfield; appearance: textfield; } img { vertical-align: top; max-height: 1.4em; max-width: 1.4em; } .selectable-icons img { cursor: pointer; } span.label.highlight { background: #e1ecf4; border: 1px dotted #39739d; } span.label { background: #e1ecf4; border: 1px dotted #39739d; }<p>just click on icon add it.</p> <div class="custom-input"> <div class="selectable-icons"> <span class="label"> tag </span> <span class="label"> tag 2 </span> <span class="label">tag 3</span> </div> <div contenteditable="true"> can type here. add icon. </div> </div>
Comments
Post a Comment