Hide Textbox Targeted by the ColorPickerExtender

2019-05-30 08:10发布

站内问答 / 前沿技术
1498 2 4

Is there a way to hide the textbox that is targeted by the colorpickerextender in the newest release of the ajax control toolkit?

If you add 

style="display:none"
to the textbox, then the color picker shows up in the top left corner of the browser window. I want it to show up near the button that is referenced in the extenders popupbuttonid.

I want to hide the textbox because I don't want the user to see the color code.

2条回答
Explosion°爆炸
2楼-- · 2019-05-30 08:32

While I didn't hide it, I did find another way to get what I wanted. When the color is selected I call a javascript function that gets the color code from the textbox and stores it in a hidden field, then clears the textbox's text, then finally sets the background color of the textbox to the color that was selected.

Here is the aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="color.aspx.cs" Inherits="color" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function ColorSelectionChanged() {
        var txtColorPickerSelector = '#' + txtColorPickerID;
        var ColorCodeSelector = '#' + ColorCodeID;
        var colorCode = '#' + $(txtColorPickerSelector).val();
        $(txtColorPickerSelector).val('').css('background-color', colorCode);
        $(ColorCodeSelector).val(colorCode);
    }        
</script>

</head>
<body>
<form id="form1" runat="server">

<asp:HiddenField ID="ColorCode" runat="server" />

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:TextBox ID="txtColorPicker" runat="server" Width="2em"></asp:TextBox>

<cc1:ColorPickerExtender ID="txtColor_ColorPickerExtender" runat="server" 
    TargetControlID="txtColorPicker"
    OnClientColorSelectionChanged="ColorSelectionChanged" />

&nbsp;<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />

<asp:Label ID="lblColorCode" runat="server"></asp:Label>
</form>
</body>
</html>

<script type="text/javascript">
    var txtColorPickerID = '<%=txtColorPicker.ClientID %>';
    var ColorCodeID = '<%=ColorCode.ClientID %>';    
</script>

And the code behind:

using System;
using System.Drawing;

public partial class color : System.Web.UI.Page
{
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblColorCode.Text = ColorCode.Value;
        txtColorPicker.BackColor = ColorTranslator.FromHtml(ColorCode.Value);
    }
}

I just assign the code to the label to prove that color code is being submitted. Sorry for the aspx formatting. Tested and working in Chrome, IE 6, IE 7, Firefox 3, Opera 9, and Safari 4.

查看更多
0人赞 添加讨论(0) 举报
劫难
3楼-- · 2019-05-30 08:41

The previous code is a bit a mess. I changed it a bit to make it clearer.

function ColorSelectionChanged() {
   $get('<%=ColorCode.ClientID %>').value = '#' + $get('<%=txtColorPicker.ClientID %>').value
   $get('<%=txtColorPicker.ClientID %>').value=''
   $get('<%=txtMessage.ClientID %>').style.color = $get('<%=ColorCode.ClientID %>').value
}

and the html part

<asp:ImageButton ID="ImageColor" runat="server" ImageUrl="~/_Images/cp_button.png" />
                       <asp:TextBox ID="txtColorPicker" runat="server" width="0" style="border:0;" />
                       <asp:HiddenField ID="ColorCode" runat="server" />
                       <ajaxToolkit:ColorPickerExtender 
                            ID="ColorPickerExtender1"
                            PopupButtonID="ImageColor"
                            TargetControlID="txtColorPicker"
                            PopupPosition="Right"
                            OnClientColorSelectionChanged="ColorSelectionChanged"
                            runat="server"
                            />

where txtMessage is the texbox they are going to write on (imagine a chat textbox). You can comment that line if you dont need it

Form the code behind just use ColorCode.value to retrive the color code selected.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)