javascript - 如何使用 javascript 或 jQuery 捕获颜色对话框事件？

Question

我想在文本区域中绘制文本颜色。我的代码运行正常，但某些控件不正确。

我希望它遵循以下步骤:

1. 用户在文本区域中键入文本并选择它 (selectedText)。

2. 点击颜色按钮(在我的代码中使用 id="color")。将出现一个颜色对话框，用户将选择一种颜色并单击确定。

3. 如果单击OK，我的代码将获取$("#color").val() 并发送到其他函数。

但是，请检查帮助我，它在颜色对话框出现之前获取 $("#color").val()。

<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);
}

所以，我的问题是:当用户单击“颜色对话框”的 OK 时如何捕获事件？非常感谢!

Answer 1

在您的 HTML 中，使用 onchange 而不是 onclick:

<input id="color" type="color" onchange="Color()" />

这会在 #color 的值发生变化时触发一个事件，即当您选择(并确认)一种新颜色时。

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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input id="color" type="color" onchange="Color()" /><br />
<textarea id="content-panel" cols="50" rows="5" onkeyup="PreView()"></textarea>
<div id="preview"></div>

( fiddle :http://jsfiddle.net/u4vnmoh9/)