`

弹出可移动的编辑框

    博客分类:
  • JS
JS 
阅读更多
[size=small]/**
* 显示输入框内容并编辑
*/
[size=large][size=x-small]function editFieldVal(obj){
var isReadOnly = obj.isReadOnly;//控件是否可以编辑
var read = obj.className;
var text = obj.value;
var editDiv = document.getElementById("editDiv");
if(null!=editDiv)
return false;
var div= document.createElement("div");
div.style.position="relative";
div.style.left="400px";
div.style.width="400px";
div.style.height="300";
div.style.top="140px";
div.style.zIndex ="2000";
div.style.border="3px solid #b2ccb8";
div.style.backgroundColor="#e4ebe5";
div.setAttribute("id","editDiv");
var ta = document.createElement("textarea");
var text = text.replace(/。/g,'。'+'\r\n');
ta.value=text;
ta.style.margin="15px 15px 15px 15px";
ta.style.top="10px";
ta.style.paddingTop="5px";
ta.style.paddingLeft="5px";
ta.style.paddingRight="5px";
ta.style.fontSize="14";
ta.style.width="385px";
ta.style.height="260px";
div.appendChild(ta);
var save = document.createElement("button");
save.value="确定";
save.style.width="65px";
save.style.height="26px";
save.style.backgroundColor="#aec5e9";
save.style.marginLeft="37%";
save.style.marginTop="2%";
save.style.marginBottom="10px";
save.onclick= function(){
var taval = ta.value.replace(/\r\n/g,'。');
taval = taval.replace(/[。]+/g,'。');
//特别约定这样处理
if(obj.name.indexOf("FixSpec.CSpecContent")!=-1){
tool.setAttrValue(dw['FixSpec'],"FixSpec.CSpecContent",taval);
sumFix();
}else{
obj.value = taval;
}
document.body.removeChild(div);
};
if(!isReadOnly){
save.disabled="disabled";
}
if(read=='read' || read == "readtextarea1"){
save.disabled="disabled";
ta.disabled="disabled";
}
div.appendChild(save);
rDrag.init(div);
var cancle = document.createElement("button");
cancle.value="取消";
cancle.style.width="65px";
cancle.style.height="26px";
cancle.style.backgroundColor="#aec5e9";
cancle.style.marginLeft="5%";
cancle.style.marginTop="2%";
cancle.style.marginBottom="10px";
cancle.onclick= function(){
document.body.removeChild(div);
};
div.appendChild(cancle);
document.body.appendChild(div);
}
[/size]

/**
*悬浮框移动
*
*/
[size=large]var rDrag = {
o : null,
init : function(o) {
o.onmousedown = this.start;
},
start : function(e) {
var o;
e = rDrag.fixEvent(e);
e.preventDefault && e.preventDefault();
rDrag.o = o = this;
o.x = e.clientX - rDrag.o.offsetLeft;
o.y = e.clientY - rDrag.o.offsetTop;
document.onmousemove = rDrag.move;
document.onmouseup = rDrag.end;
},
move : function(e) {
e = rDrag.fixEvent(e);
var oLeft, oTop;
oLeft = e.clientX - rDrag.o.x;
oTop = e.clientY - rDrag.o.y;
rDrag.o.style.left = oLeft + 'px';
rDrag.o.style.top = oTop + 'px';
},
end : function(e) {
e = rDrag.fixEvent(e);
rDrag.o = document.onmousemove = document.onmouseup = null;
},
fixEvent : function(e) {
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}
分享到:
评论

相关推荐

    mfc按CEdit编辑框弹出自定义键盘

    本主题聚焦于如何在MFC应用中实现一个功能,即当用户单击CEdit(编辑框)控件时,能够弹出一个自定义的数字键盘。这个功能在例如移动设备模拟器或特定输入场景中非常有用。接下来,我们将详细探讨如何实现这一功能。...

    改变编辑框的形状,美观而实用

    - **键盘交互**:确保键盘弹出时,编辑框仍能正常聚焦并接受输入。 - **辅助功能**:遵循无障碍设计原则,如添加适当的`aria`属性,以便辅助技术用户能够理解编辑框的功能。 在实际项目中,"异形编辑框"可能包含了...

    带提示信息的编辑框

    在IT行业中,编辑框是用户界面(UI)设计中不可或缺的一部分,它允许用户输入文本数据。在特定场景下,为了提高用户体验和明确交互目的,我们会使用“带提示信息的编辑框”。这种编辑框通常在空置时显示一些指导性的...

    可编辑列表框

    - **编辑框定位**:使用 `GetSubItemRect()` 获取单元格的矩形位置,通过 `MoveWindow()` 移动编辑框至相应位置。 - **编辑框内容初始化**:通过 `GetItemText()` 获取单元格内容,并使用 `SetWindowText()` 设置为...

    9种js弹出动态窗口的 php代码

    - `$.fn.modal()`:Bootstrap框架中的模态函数,可轻松创建响应式的弹出窗口。 - `$.fn.alert()`, `$.fn.confirm()`, `$.fn.prompt()`:这些是jQuery模拟原生JavaScript弹出对话框的方式,增强了样式和交互性。 4...

    易语言自创建编辑框.7z

    7. **程序流程控制**:在适当的时间创建编辑框,需要掌握程序流程控制结构,如条件语句、循环语句等,以确保编辑框在正确的地方和时间出现。 8. **错误处理**:编程过程中,错误处理是必不可少的一部分。易语言提供...

    易语言源码易语言自创建编辑框.rar

    5. **用户界面设计**:源码可能包含对编辑框外观和行为的定制,比如设置编辑框的边框样式、是否可多行编辑、是否允许光标移动等。 6. **程序流程控制**:源码可能会涉及到程序执行流程的设计,如在用户输入后进行...

    易语言编辑框滚动条联动源码例程.rar

    2. **滚动条属性设置**:滚动条有多个属性,如最大值、最小值、当前值等,我们需要根据编辑框中的文本长度动态调整这些属性,确保滚动条能正确反映出文本的可滚动范围。 3. **滚动条消息处理**:易语言中,滚动条的...

    可拖拽的bootstrap弹出窗口

    在本项目中,我们关注的是一个可拖拽的Bootstrap弹出窗口,这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的位置。这个功能是通过结合Bootstrap的弹出插件与jQuery UI库来实现的。 首先,`Bootstrap` 是一个...

    html5手机对话框制作文字提示弹出框特效

    对话框和弹出框在网页设计中扮演着重要的角色,它们可以用于显示警告、询问用户、确认操作或者提供额外的信息。在传统的HTML4中,我们通常使用`<dialog>`元素来创建对话框,但在HTML5中,由于浏览器对`<dialog>`的...

    弹出框、模态框插件

    1. **高度可定制化**:ArtDialog允许开发者自定义弹出框的样式、大小、位置、内容和行为。通过CSS和JavaScript API,你可以轻松调整弹出框的外观,使其与网站设计风格保持一致。 2. **丰富的API接口**:ArtDialog...

    安卓自定义车牌录入编辑框

    8. UI优化:为了提升用户体验,需要考虑键盘弹出时对布局的影响,可能需要使用`ScrollView`或`NestedScrollView`来处理滚动行为。 9. 可访问性:确保自定义组件遵循Android的可访问性指南,支持屏幕阅读器和其他...

    超级编辑框模块

    6. 显示自动完成:当用户输入达到一定长度时,模块会自动弹出一个下拉列表,显示匹配的自动完成建议。这个功能通过优化交互体验,极大地提高了编码速度。 7. 确认自动完成:用户可以选择下拉列表中的任意一项来确认...

    jquery div 可拖拽弹出对话框 .

    在这个场景中,"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能,允许用户可以手动拖动 HTML 的 `div` 元素(通常用于创建对话框或模态窗口)在页面上自由移动。这种功能提高了用户体验,让用户...

    MFC制作的弹出光驱小软件

    《MFC制作的弹出光驱小软件》 在计算机编程领域,MFC(Microsoft Foundation Classes)是微软提供的一套面向对象的C++类库,它基于Windows API,用于简化Windows应用程序的开发。MFC提供了丰富的类库,使得开发者...

    易语言-易语言超级编辑框

    超级编辑框,日期,时间,ip,电话号码,银行卡号, 等格式可以自己自定义。 简单写了个调用列子,各位高手可以自己完善这个控件。 帮助文档和黑月OCX驱动支持库已经打包在一起了 BUG,易语言控件属性界面直接设定...

    QGraphicsItem选中后,出现边框,可以拉伸

    同时,可能还需要限制拉伸的最小和最大尺寸,避免出现不可接受的变形。 总之,通过自定义`QGraphicsItem`的绘画行为和鼠标事件处理,我们可以轻松地创建一个在选中时显示边框并允许用户拉伸的图形元素。这样的功能...

    bootstrap可拖拽弹出层

    Bootstrap可拖拽弹出层是一种基于前端框架Bootstrap和jQuery实现的交互式UI组件。这个组件允许用户自定义和拖动弹出窗口,提供了一种非模态(非阻塞)的对话体验,使得用户可以在不关闭当前页面的情况下与弹出层进行...

    完整版可移动工具条简单例程密码330303.rar

    标题中的“完整版可移动工具条简单例程”暗示了这是一个关于编程的资源,特别是涉及到创建或使用可移动工具条的代码示例。在IT领域,可移动工具条通常指的是那些可以在用户界面上自由移动、调整大小或者隐藏的控件,...

    易语言编辑框无法框选源码-易语言

    在易语言的设计界面中,可以通过右键点击编辑框控件,选择“属性”选项,然后在弹出的属性窗口中找到“可选择”属性,将其设置为“是”。 其次,可能的问题在于编辑框的事件处理。如果在易语言的事件代码中,有特定...

Global site tag (gtag.js) - Google Analytics