Go Premium for a chance to win a PS4. Enter to Win

  • Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 53
  • Last Modified:

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 Gupta
Vishal Gupta
1 Solution
Matthew AndersonCommented:
If you need a solution in pure javascript:
JSFiddle: http://jsfiddle.net/qY7gE/831/
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

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 = $(evt.originalEvent.target).is(':input') ?
				evt.originalEvent.target :

			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 = $(evt.originalEvent.target).is(':input') ?
						getOrigin(evt.originalEvent.target) :

				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="http://code.jquery.com/jquery-latest.min.js"></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(element.id==='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.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now