How can I catch the color dialog event using javascript or jQuery?

I want to draw the color of the text in a textbox. My code works, but some of the controls are not true.

I want it to follow these steps:

• Enter text text into the text box and select it (selectedText).

• Click the color button (in my code with id="color"
  
  ). A color dialog will appear, the user selects a color and click OK.

• If clicked OK
  
  , my code will receive $("#color").val()
  
  and dispatch other functions.

But please check help me it gets $("#color").val()

before the color dialog appears.

<input id="color" type="color" onclick="Color()" />
<textarea id="content-panel" cols="100" rows="20" onkeyup="PreView()"></textarea>
<div id="preview"></div>

var _string = "";
function Color()
{
  GetSelectedText($("#color").val());
  $("#content-panel").focus();
}

function GetSelectedText(type)
{
  var temp = document.getElementById("content-panel");
  // check if text is selected
  if(temp.selectionStart !== undefined)
  {
    startPos = temp.selectionStart;
    endPos = temp.selectionEnd;

    // get selectedText from startPos to endPos
    selectedText = temp.value.substring(startPos, endPos);

    startString = temp.value.substring(0, startPos);
    endString = temp.value.substring(endPos, temp.value.length);
  }
  $("#content-panel").val(startString + "[" + type + "]" + selectedText + "[/" + type + "]" + endString);
  PreView();
}

function PreView()
{
  var _temp = document.getElementById("content-panel");
  _string = _temp.value; // get new value

  _string = _string.replace(/\[(#(\w{6})+?)\]/g, "<font color=\"$1\">");
  _string = _string.replace(/\[\/(#(\w{6})+?)\]/g, "</font>");

  var lines = _string.split("\n");
  var line = "";
  for(var i = 0; i < lines.length; i++)
  {
    line += lines[i] + "<br>";
  }
  $("#preview").html(line);
}

      

        
        
        
      

    

So my question is, how do I catch the event when the user clicks OK

in the "color dialog"? Many thanks!