如何在VS.NET/C# Builder开发的网页中也能实现DOS下录入数据回车换行的功能

WEB开发心得体会 同时被 2 个专栏收录
25 篇文章 0 订阅
3 篇文章 0 订阅
如何在VS.NET/C# Builder开发的网页中也能实现DOS下录入数据回车换行的功能
北京煤炭科学研究总院经济与信息研究所 丁报圣

       在DOS年代,录入数据时我们习惯了在录入完一行数据后敲一个回车转入下一行的数据录入。昔日DOS的辉煌已经成为过去,如今更加友好易用的GUI图形操作界面Windows已经进入了我们的日常生活。
      1996年Windows95的出现是软件史上的一次伟大革命。Windows 是美国微软公司开发的一种图形方式的操作系统,它的出现克服了 DOS 中难记的一些命令,使计算机与人更亲近,只要轻轻点击鼠标,计算机就会完成一个动作。同时windows也改变了原先DOS下录入数据敲回车的方式,现在我们若是在录入数据时希望光标跳到下一行或下一个输入框则只能按键盘上的TAB键或用鼠标点击下一个输入框。这个改变对于没有接触过DOS操作系统的计算机用户也许没有什么大的影响,但是对于从DOS下转过来的的计算机用户却是一个鸡肋;特别是我们的数据录入人员,在DOS年代已经习惯在录入一行数据时敲一下回车继续下一行数据的录入。能不能眷顾一下这些老用户的习惯也是我们开发人员应该考虑的事情。
      笔者在前不久的一个项目中就遇到了这样的问题:用户要求我们的前台录入页面提供支持回车换行的功能。做过开发的人都知道在传统windows应用程序中实现回车换行其实并不太难,我们可以通过截获键盘的回车按键值,然后通过发送消息使录入界面中的下一控件(如:文本框输入框等)获得输入焦点来达到这个目的。在WEB页面中我们也可以通过脚本(JAVASCRIPT或VBSCRIPT)语言设置WEB控件的焦点来实现。
在传统的ASP或JSP/PHP中编写的WEB应用程序中实现回车换行的功能时,我们通常的做法就是在控件的OnkeyPress事件、OnClick事件或页面中的OnSubmit等事件中写上一段JAVASCRIPT或VBSCRIPT代码捕捉到键盘回车的键值,然后人为指定跳转顺序实现回车换行,这种做法缺点只能适用于页面控件元素很少项目不大的场合,一旦页面控件元素或该类文件很多时,这种人工方式必然要消耗很大的工作量。能不能有一个行之有效的办法使我们一劳永逸?这就是本文笔者要讨论的内容。诸位看官莫急,容我慢慢道来:
       我们的项目是用VB.NET开发的,前台录入界面是VB.NET程序编译后生成的HTML页面,在浏览器中运行。VB.NET开发的程序最大的好处是程序代码可以和界面相隔离,也就是相互独立;但是用VB.NET开发的程序编译后生成的HTML录入界面中的控件元素名称是很难确定的,虽然也会具有一定的命名规则。在编译前我们是无法得知编译生成页面上的可录入控件元素名称的。
       这样一来我们就碰到了一个问题,难道说我们要实现DOS下的回车换行功能就只有打开一个个的ASPX文件查看其中的元素名称,然后按ASP或JSP/PHP中的做法写相应的JAVASCRIPT或VBSCRIPT代码了吗?这显然是一个让人晕倒的事实;我们的这个项目有上百个ASPX文件,要打开上百个文件一一按ASP或JSP/PHP中的做法写下JAVASCRIPT或VBSCRIPT回车实现代码简直就是奇闻。笔者通过查MSDN和反复实践找到了解决方法。
      下面我将用JavaScript脚本语言为例来解决这个问题,在写代码前我得向大家介绍一些相关知识;浏览器中浏览的页面文件在JavaScript中称之为一个文档对象(DOM)。在 JavaScript 能够涉及的范围内有如下几个“大”对象:Window, Document, Location, Navigator, Screen, History 等。Window对象是Document、Location和History对象的父对象。
      围绕我们要解决的问题,这里我们重点提一下Document、Form、Elements三个对象及Onkeypress事件,Document 文档对象:是指描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。用法:document (当前窗口)或 <窗口对象>.document (指定窗口) ; Form 对象:document.forms[] 是一个数组,包含了文档中所有的表单Form ;Elements对象:为表单元素对象,<表单对象>.elements 是一个数组,包含了该表单所有的对象;Onkeypress事件是一个键盘事件,是在用户按下键盘上的键时引发的事件。通过这三大对象再配合Onkeypress事件就可以完成现我们的要求;
      下面是最终的实现代码清单:
var JumpTypeArray =new Array("text","password","textarea","checkbox","radio",
"select","select-one","select-multiple","file")//引用页面上可获得焦点元素类型
var DebarTypeArray =new Array("submit","reset","button","checkbox","radio",
"select","select-one","select-multiple","hidden")//引用页面上需排除元素类型
function inStrArray(src,dec)
{//检查给定串是否在指定字符串数组中,如在返回索引号,否返回-1;
for (var i=0 ; i<dec.length; i++)
{
if (src==dec[i])
{
return i;//定位成功,返回索引号
break;
}
}
return -1; //定位失败,返回-1
}
function checkCR(evt)
{//回车响应函数
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
var frm=document.forms[0]; //指定FORM名称为页面中的第一个
if ((evt.keyCode == 13) && (inStrArray(node.type,JumpTypeArray)!=-1))
{//判断当前对象是否为可输入对象,对象类型数组:JumpTypeArray
for (var i = 0 ; i < frm.elements.length; i++)
{//for begin
if (frm.elements[i].name==node.name)
{//定位当前对象
if ((i+1)< frm.elements.length)
{//对象数组索引越位判断
if (inStrArray(frm.elements[i+1].type,JumpTypeArray)!=-1)
{ //判断当前对象下一个对象是否为可输入组件,对象类型数组:JumpTypeArray
frm.elements[i+1].focus();//设置焦点
if (inStrArray(frm.elements[i+1].type,DebarTypeArray)==-1)
{ //过滤不可选中文本对象,对象类型数组:DebarTypeArray
frm.elements[i+1].select();//选中组件文本内容
}
}
return false;//禁止提交表单内容
break;
}
else
{//提交表单内容
return true;
break;
}
}
}//end for
}
}
document.onkeypress = checkCR;

引用说明:将上面的代码存成文件,如:WebEnter.js,然后在要实现回车换行的页面中写上:
<script language="JavaScript" src="path+WebEnter.js"></script> 即可。
Path:是WebEnter.js文件所在路径。

适用环境:Windows9x/NT/2000/XP+ASP/JSP/PHP/ASP.NET+IE4.x(及以上版本)

注意事项:
1、引用页面中不能有多个表单(Form)。
2、引用页面中不允许有重名对象(object)。

调用例子: http://dbs.myrice.com/dbs/Demo.html

最后需要说明的是:当引用页面在NS系列浏览器中浏览时,以上代码需修改,因为在NS中的浏览器对象和IE中的对象是有一点区别的,这个就留给读者练手了。

欢迎大家来信和我讨论任何技术上的问题。
我的Email: yzdbs@msn.com
-------------------------------------------------------------------------------------
欢迎转载,请注明出处!!!
-------------------------------------------------------------------------------------
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
<p style="font-size:16px;color:#666666;"> <img src="https://img-bss.csdn.net/202001311426171105.png" alt="" /> </p> <p style="font-size:16px;color:#666666;"> <strong><span style="font-size:20px;">课程目标</span></strong> </p> <p style="font-size:16px;color:#666666;"> 《从零开始学Scrapy网络爬虫》从零开始,循序渐进地介绍了目前流行的网络爬虫框架Scrapy。即使你没有任何编程基础,学习起来也不会有压力,因为我们有针对性地介绍了Python编程技术。另外,《从零开始学Scrapy网络爬虫》在讲解过程以案例为导向,通过对案例的不断迭代、优化,让读者加深对知识的理解,并通过14个项目案例,提高学习者解决实际问题的能力。 </p> <p style="font-size:16px;color:#666666;"> <br /> </p> <p style="font-size:16px;color:#666666;"> <strong><span style="font-size:20px;">适合对象</span></strong> </p> <p style="font-size:16px;color:#666666;"> 爬虫初学者、爬虫爱好者、高校相关专业的学生、数据爬虫工程师。 </p> <p style="font-size:16px;color:#666666;"> <br /> </p> <p style="font-size:16px;color:#666666;"> <span style="font-size:20px;"><strong>课程介绍</strong></span> </p> <p style="font-size:16px;color:#666666;"> 《从零开始学Scrapy网络爬虫》共13章。其,第1~4章为基础篇,介绍了Python基础、网络爬虫基础、Scrapy框架及基本的爬虫功能。第5~10章为进阶篇,介绍了如何将爬虫数据存储于MySQL、MongoDB和Redis数据;如何实现异步AJAX数据的爬取;如何使用Selenium和Splash实现动态网站的爬取;如何实现模拟登录功能;如何突破反爬虫技术,以及如何实现文件和图片的下载。第11~13章为高级篇,介绍了使用Scrapy-Redis实现分布式爬虫;使用Scrapyd和Docker部署分布式爬虫;使用Gerapy管理分布式爬虫,并实现了一个抢票软件的综合项目。 </p> <p style="font-size:16px;color:#666666;"> <span style="color:#FF0000;">      由于目标网站可能会对页面进行改版或者升级反爬虫措施,如果发现视频的方法无法成功爬取数据,敬请按照页面实际情况修改XPath的路径表达式。视频教程主要提供理论、方法支撑。我们也会在第一时间更新源代码,谢谢!</span> </p> <p style="font-size:16px;color:#666666;"> <img src="https://img-bss.csdn.net/202001311426306665.png" alt="" /> </p> <p style="font-size:16px;color:#666666;"> <strong><span style="font-size:20px;">课程特色</span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdn.net/202001311426415123.png" alt="" /> </p> <div> <br /> </div>
<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程商城项目的实战源码是我发布在 GitHub 上的开源项目 newbee-mall (新蜂商城),目前已有 6300 多个 star,</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 商城项目功能的讲解,让大家实际操作并实践上手一个大型的线上商城项目,并学习到一定的开发经验以及其开发技巧。<br /> 商城项目所涉及的功能结构图整理如下:<br /> </span> </div> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好,无需复杂的操作步骤,仅需 2 秒就可以启动这个完整的商城项目 </li> <li> 最终的实战项目是一个企业级别的 Spring Boot 大型项目,对于各个阶段的 Java 开发者都是极佳的选择 </li> <li> 实践项目页面美观且实用,交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,可以进一步提升你的市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);">   </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目的页面和功能展示,分别为: </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li>   </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
<p style="color:#333333;"> <strong> </strong> </p> <p style="font-family:"color:#222226;font-size:14px;background-color:#FFFFFF;"> <strong><span style="color:#337FE5;">[为什么要学习Spring Cloud微服务]</span> </strong> </p> <p style="font-family:"color:#222226;font-size:14px;background-color:#FFFFFF;"> <strong><span style="color:#4D555D;"></span> </strong> </p> <p class="ql-long-24357476" style="font-family:"color:#222226;font-size:14px;background-color:#FFFFFF;"> <strong><span style="font-family:"background-color:#FFFFFF;">SpringCloud作为主流微服务框架,<span style="color:#4D555D;">已成为各互联网公司的首选框架,国内外企业占有率持续攀升,</span>是Java工程师的必备技能。</span><span style="font-family:"background-color:#FFFFFF;">就连大名鼎鼎的阿里巴巴</span><span style="font-family:"background-color:#FFFFFF;">dubbo</span><span style="font-family:"background-color:#FFFFFF;">也正式更名为</span><span style="font-family:"background-color:#FFFFFF;">Spring Cloud Alibaba</span><span style="font-family:"background-color:#FFFFFF;">,成为了</span><span style="font-family:"background-color:#FFFFFF;">Spring Cloud </span><span style="font-family:"background-color:#FFFFFF;">微服务的一个子模块。</span><span style="font-family:"background-color:#FFFFFF;"></span><span style="font-family:"background-color:#FFFFFF;">Spring Cloud是企业架构转型、个人能力提升、架构师进阶的不二选择。</span> </strong> </p> <p style="color:#333333;"> <strong><strong><br /> </strong> </strong> </p> <strong><span style="font-family:"color:#337FE5;font-size:14px;background-color:#FFFFFF;">【推荐你学习这门课的理由】</span><br /> </strong> <p> <br /> </p> <p> <span>1、</span><span style="color:#222226;font-family:"font-size:14px;background-color:#FFFFFF;">本课程总计</span><span style="background-color:#FFFFFF;">29</span><span style="color:#222226;font-family:"font-size:14px;background-color:#FFFFFF;">课时,<span style="color:#333333;">从微服务是什么、能够做什么开始讲起,绝对的零基础入门</span></span><span></span> </p> <p> <span style="background-color:#FFFFFF;">2、<span style="color:#333333;">课程附带全部26个项目源码,230页高清PDF正版课件</span><span style="color:#333333;"></span></span> </p> <p> <span style="background-color:#FFFFFF;"><b><br /> </b></span> </p> <p> <span style="background-color:#FFFFFF;"><b><span style="color:#337FE5;">【课程知识梳理】</span></b></span> </p> <p> <span style="background-color:#FFFFFF;"><b>1、</b></span><span style="color:#333333;">先讲解了什么是单体架构、什么是微服务架构、他们之间有什么区别和联系,各自有什么优缺点。</span> </p> <p> <span style="color:#333333;">2、</span><span style="color:#333333;">从本质入手,使用最简单的Spring Boot搭建微服务,让你认清微服务是一种思想和解决问题的手段,而不是新兴技术。</span> </p> <p style="color:#333333;"> 3、讲解Spring Boot 与Spring Cloud 微服务架构之间的联系,原生的RestTemplate工具,以及Actuator监控端点的使用。 </p> <p style="color:#333333;"> 4、带着微服务所带来的各种优缺点,为大家引入服务发现与注册的概念和原理,从而引入我们的第一个注册心服务Eureka。 </p> <p style="color:#333333;"> 5、引入负载均衡的理念,区分什么是服务端负载均衡,什么是客户端负载均衡,进而引入Ribbon负载均衡组件的详细使用。 </p> <p style="color:#333333;"> 6、为了解决微服务之间复杂的调用,降低代码的复杂度,我们引入了Feign声明式客户端,让你几行代码搞定服务的远程调用。 </p> <p style="color:#333333;"> 7、最后为大家介绍了整个微服务体系应该包含什么,学习路线是什么,应该学习什么。 </p> <p style="color:#333333;"> <strong><br /> </strong> </p> <p style="color:#333333;"> <strong><span style="color:#337FE5;">【</span><strong><span style="color:#337FE5;">学习方法</span></strong><span style="color:#337FE5;"></span><span style="color:#337FE5;">】</span></strong> </p> <p style="color:#333333;"> 每一节课程均有代码,最好的方式是静下心来,用一天的时间,或者两个半天时间来学习。 </p> <p style="color:#333333;"> 一边听我的讲解,一边使用我提供的项目代码进行观察和运行。 </p> <p style="color:#333333;"> 只要你能跟住我的节奏,你就可以搞定微服务。 </p> <br />
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

Arthur

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值