[译文]可大可小的Textbox输入框
概述
本文讨论在服务器控件Textbox旁边添加一个“加号”图片,点击后弹出大的输入框以显示更多内容。用户可以在弹出的多行大输入框中编辑,并提交到小的输入框中。所有的操作没有回发。这样可以既保持页面美观,又不影响输入大量的文本内容。
如下图所示
背景介绍
很多程序员喜欢扩展TEXTBOX输入框,以加上验证、标题、帮助介绍等内容。有时用户需要一个大的多行的输入框来查看和编辑多行文本。但是多行TEXTBOX又显得不那么够用。
代码介绍
首先在页面中的单行输入框旁边添加一个图片
<div style="float:left"><asp:TextBox ID="txt" runat="server" Width="200px" /></div><div style="float:left"><img alt="zoom text" id="imgZoom" runat="server" style="cursor:pointer;" /></div>
接下来,在页面上添加一个弹出层。默认设置为隐藏。弹出层中包含一个多行的输入框和一个确认、一个取消按钮。点击确认时,会隐藏弹出层并把多行文本回发到单行的输入框上。点取消按钮则不做任何更改。
弹出层还要放一个隐藏域,用于临时保存数据。
<div id="divZoom" style="z-index:1000;" style="font-size:smaller;
font-family:Arial;position:absolute;top:0; left:8;visibility:hidden;
background-color:#C0C0C0;padding:3px 3px 3px 3px;border:solid 1px black;">
<asp:TextBox runat="server" ID="txtZoom" TextMode="MultiLine" Wrap="false"
Width="400px" Height="300px"></asp:TextBox><br />
<button id="btnZoomSubmit" onclick="HideZoom(true);return false;"
style="cursor:hand;">Submit</button> <button id="btnZoomCancel"
onclick="HideZoom(false);return false;" style="cursor:hand;">Cancel</button>
<input type="hidden" id="txtid" name="txtname" value="txtvalue" /></div>
在页面的pre-render事件中,添加Javascript调用,用于保持加号图片按钮的可用状态与单选输入框一致。当单行输入框不可用时,图片事件也不可用。我使用两个图片来区分这两个状态。可用时,显示: ,禁用时,显示:
1 2 3 4 5 6 7 8 9 10 11 12 13 | private void Page_PreRender( object sender, System.EventArgs e) { if (txt.Enabled && !txt.ReadOnly) { //add onclick call imgZoom.Attributes.Add( "onclick" , "ShowZoomPopup('" + txt.ClientID + "');" ); imgZoom.Src = "../images/txtzoom.png" ; } else { //remove onclick call imgZoom.Attributes.Add( "onclick" , "" ); imgZoom.Src = "../images/txtzoomdisabled.png" ; } } |
页面前台事件:
<script language="JavaScript" type="text/javascript" >
function ShowZoomPopup(txtboxid) {
//得到输入框值。
var txtbox = document.getElementById(txtboxid);
var strTextBoxValue = document.getElementById(txtboxid).value;
//SET THE ZOOM PANEL
var hp = document.getElementById("divZoom");
hp.style.visibility = "Visible";
hp.style.top = getAbsoluteTop(txtbox) + 'px';
hp.style.left = (getAbsoluteLeft(txtbox) + 2) + 'px';
txtZoom = document.getElementById('ctl00_txtZoom');
txtZoom.value = strTextBoxValue;
//SET THE HIDDEN FIELD WITH TXT ID
document.getElementById('txtid').value = txtboxid;
}
function HideZoomPopup(status) {
//IF TRUE (SUBMIT BUTTON WAS CLICKED i.e. COPY DATA TO TEXTBOX)
//FALSE MEANS CANCEL BUTTON WAS CLICKED.
if (status) {
//GET HIDDEN CONTROLS DATA
var txtboxid = document.getElementById('txtid').value;
document.getElementById(txtboxid).value =
document.getElementById('ctl00_txtZoom').value;
}
//SET THE ZOOM PANEL
var hp = document.getElementById("divZoom");
hp.style.visibility = "Hidden";
}
function getAbsoluteLeft(objectId) {
o = objectId;
var objwidth = o.offsetWidth;
oLeft = o.offsetLeft;
while (o.offsetParent != null) {
oParent = o.offsetParent;
oLeft += oParent.offsetLeft;
o = oParent;
}
return oLeft;
}
function getAbsoluteTop(objectId) {
o = objectId;
oTop = o.offsetTop ;
while(o.offsetParent!=null) {
oParent = o.offsetParent;
oTop += oParent.offsetTop;
o = oParent;
}
return oTop;
}
</script>
全文完。翻译自CodeProject。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步