Change display property of a div on select some text in another content editable div

<div id="myDiv" contenteditable="true"></div>

<div id="arrowBox" style="display:none;">Some buttons Here</div>

Now i want to change display block of arrowBox div when select some text in myDiv..

Please Help me

Vishal GuptaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Matthew AndersonCommented:
If you need a solution in pure javascript:
function gText(e) {
    let t = (document.all) ? document.selection.createRange().text : document.getSelection();
    t = t.toString();
    if( t ) {
		if( t.length > 0 ) {
    		document.getElementById('arrowBox').style.display = "block";

document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Leonidas DosasCommented:
Look that JQuery plugin: jquery-text-selection-special-event
Include the follow JQuery code in the head section via script  :
(function ($) {
		// Will contain the last events' string and element, used for comparison
		selObj = { str : "", el : undefined },

		// Cache selection range methods
		docSel = document.selection,
		winSel = window.getSelection && window.getSelection(),

		// Events to be bound for our handler
		bindEvents = ['mouseup', 'keyup'],

		// Helper to grab currently selected text
		getSelected = function (evt) {

			// If the called event originates from a inputbox/form element (in FF), use that
			// to get the selected text (FF doesn't trigger getSelection() on input
			// elements natively)
			var el = $(':input') ? :

			return el && +el.selectionEnd ? 
				$(el).val().substring(el.selectionStart, el.selectionEnd) :
				(winSel || docSel.createRange().text || "").toString();

		// Helper to grab which common ancestor the text has
		getOrigin = function (input) {
			return docSel && docSel.createRange().parentElement()
				|| input
				|| winSel && winSel.getRangeAt(0).commonAncestorContainer
				|| document.body;

		// Create our custom event namespace
		$me = $.event.special.textselect = {

			// Do stuff when it is bound
			setup: function () {
				var that = this;
				// Hook mouseup to fire our custom event
				$(bindEvents).each(function (i, o) {
					$(that).bind(o, $me.handler);
			// Do stuff when it is unbound
			teardown: function () {
				var that = this;
				$(bindEvents).each(function (i, o) {
					$(that).unbind(o, $me.handler);
			// Do stuff when the event is triggered
			handler: function (evt) {
				// Since we're not letting jQuery handle this object (due to our return
				// parameters, we "fix" the event object to be cross-browser compliant
				// manually
				evt = $.event.fix(evt);
				// Grab currently selected text and its common ancestor element
					curText = getSelected(evt),
					conElement = $(':input') ?
						getOrigin( :

				if (conElement.nodeType === 3) conElement = conElement.parentNode;

				// If it differs from the old selected text, trigger event
				if (selObj.str !== curText || selObj.el !== conElement) {
					// Set currently selected text (and element) to the actual currently
					// selected text and element
					selObj = { str : curText, el : conElement };
					// Change event type to our custom event
					evt.type = 'textselect';
					// Fire the simulated event
					$.event.trigger(evt, [selObj.str, selObj.el]);

Open in new window

And then
<!DOCTYPE html>
<script type="text/javascript" src=""></script>
  <script type="text/javascript" src="./your_plugin_directory_here.js" > </script>
<title>HTML5, CSS3 and JavaScript demo</title>
<!-- Start your code here -->

<div id="myDiv" contenteditable="true">AAAAAAAA</div>

<div id="arrowBox" style="display:none;">Some buttons Here</div>

<!-- End your code here -->
$(document).bind('textselect', function (evt, string, element) { if('myDiv'){
  $('#arrowBox').css('display', 'block');} });

Open in new window

HainKurtSr. System AnalystCommented:
here is a solution with jQuery

<div id="myDiv" contenteditable="true">
  Name: <input>
  Password: <input type=password>

<div id="arrowBox" style="display:none;">

Open in new window

$("#myDiv input").on("keyup", function() {

Open in new window

* you can also use focus / keydown / keypress / click instead of keyup
Vishal GuptaAuthor Commented:
thank you,

for solving my problem..

It's working correctly.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.