`

在Web页面中控制其元素的选择状态

    博客分类:
  • js
阅读更多

为了在Web页面上使用文本搜索,在文本框内实现选择效果,在页面上屏蔽选择状态等。我们需要使用脚本(如JavaScript)来精确的控制页面中UI元素的选择状态。下面从操作元素选择区和屏蔽元素被选择两个方面来说一说。

    操作元素选择区,我们可以使用对应对象的select()方法选择页面内容,其中包括INPUT元素中的内容、TextRange对象中的文字和controlRange Collection对象中的控件。
1:

<input id="txb" type="text" value="Text Box"/> 
<a href="#" onclick="document.getElementById('txb').select()">Select</a>

 2:

<span id="spn">this is a span.</span>
<a href="#" onclick="SelectText();">Select</a>
<script language="javascript">
function SelectText()
{
    var range = document.body.createTextRange();
    range.findText("this is a span.");
    range.select();
}
</script>

 3:

<select id="slt1"><option>select</option></select>
<select id="slt2"><option>select</option></select>
<a href="#" onclick="SelectControl();">Select</a>
<script language="javascript">
function SelectControl()
{
    var controlRange = document.body.createControlRange();
    controlRange.add(document.getElementById('slt1'));
    controlRange.add(document.getElementById('slt2'));
    controlRange.select();
}
</script>

  

分享到:
评论

相关推荐

    在web.xml中设置错误处理页面.docx

    请在web.xml文件中使用– page &gt;元素为整个web应用程序设置错误处理页面。已知:处理状态码为404的页面为404.jsp,处理状态码为500的页面为500.jsp。

    基于JavaScript技术在Web页面实现放大镜效果

    在Web页面中,JavaScript技术的应用非常广泛,可以实现很多的动态交互效果。JavaScript 技术可以实现很多网页的特效,例如,状态栏、轮播图、tab选项卡等效果。放大镜效果是网页中非常常见的一种交互效果,用户可以...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    本书全面讲授网页设计与制作技术、JavaScript脚本编程和Web数据库应用技术。本书以目前最流行的网页设计三剑客Dreamweaver 8、Fireworks 8和Flash 8作为支撑平台,由浅入深,系统地介绍了网页的构思、规划、制作和...

    漂亮的ComponentArtWebUI web界面

    改进了IE7中的元素覆盖运算法则,优化其执行性能。 ComponentArt MultiPage 增加了IE转换效果 (Transition, TransitionDuration属性)。 Web.UI 2007.1 版本没有进行整体框架的改变,只是在Web.UI 2006.2的基础上进行...

    web题库填空题带答案版2.1.docx

    20.当访问一个Web应用程序时,如果没有指定资源名称,则会访问默认的页面。 21.在HTTP协议中【Refresh】头字段用于告诉浏览器自动刷新页面的时间? 22.服务器返回状态码是500,表示【服务器内部错误】 23.在HTTP...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    HybridApp 一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行 优雅降级 一开始就构建站点的完整功能,然后针对浏览器测试和修复。认为应该针对那些最高级、最...

    [完整][中文][WEB安全测试].(美)霍普.扫描版.pdf

     在你对Web应用所执行的测试中,安全测试可能是最重要的,但它却常常是最容易被忽略的。本书中的秘诀演示了开发和测试人员在进行单元测试、回归测试或探索性测试的同时,如何去检查最常见的Web安全问题。与即兴的...

    <WEB开发规范>手册

    WEB开发规范 目 录 1. 编程规范... 4 1.1. HTML页面... 4 1.1.1. 页面规范... 4 1.1.2. 元素id命名规范(蓝色表示常用) 4 1.1.3. 元素name命名规范... 6 1.2. ASP页面... 6 1.2.1. 文件命名规范... 6 1.2.2....

    DrissionPage Web自动化操作集成工具 v3.2.24

    2、页面对象可在浏览器和 requests 间任意切换,保留登录状态。 3、极简单但强大的元素定位语法,支持链式操作,代码极其简洁。 4、两种模式提供一致的 API,使用体验一致。 5、人性化设计,集成众多实用功能,...

    PHP和MySQL Web开发第4版pdf以及源码

    3.10.1 在数组中浏览:each()、current()、reset()、end()、next()、pos()和prev() 3.10.2 对数组的每一个元素应用任何函数:array_walk() 3.10.3 统计数组元素个数:count()、sizeof()和array_count_values() ...

    PHP和MySQL WEB开发(第4版)

    3.10.1 在数组中浏览:each()、current()、reset()、end()、next()、pos()和prev() 3.10.2 对数组的每一个元素应用任何函数:array_walk() 3.10.3 统计数组元素个数:count()、sizeof()和array_count_values() ...

    Web前端框架应用:第4章 Vue过渡动画-多个元素过渡.pptx

    第4章 Vue过渡和动画 过渡和动画基础 多个组件过渡 多个元素过渡 列表过渡 ...上述代码是使用的v-if条件语进行判断的,在这里使用computed计算属性来监控变量show的变化,在页面上进行数据绑定来展示结

    ASP.NET的网页代码模型及生命周期

    在ASP.NET中,可以创建ASP.NET网站和ASP.NET应用程序,ASP.NET网站的网页元素包含可视元素和页面逻辑元素,并不包含designer.cs文件。而ASP.NET应用程序包含designer.cs文件。创建ASP.NET网站,首先需要创建网站,...

    HTML5+CSS3 快速入门 前端 源代码.rar

    39.使用选择器在页面中插入内容34:26 40.文字阴影与自动换行20:24 41.服务器端字体和@font-face属性21:50 42.盒布局上18:03 43.盒布局下27:48 44.overflow属性30:44 45.CSS3中新增的背景属性41:59 46.CSS3中边框相关...

    Ah52_html5_WEB曲线_Transformations_

    PATHS)、绘制函数、MOVETO方法、二次方、三次方贝塞尔曲线、像素级操作、绘制图片等丰富内容,定义了二维Canvas(画布)的绘画API,使用这些API使得可以在Web页面上进行立即模式的二维图形绘制。

    webtraversallibrary:Web遍历库(WTL)是一个Python库,用于在诸如Selenium之类的基本执行层之上抽象Web交互。

    视图:选项卡中当前网站的静态快照,其中包含与页面及其元素相关联的元数据,并可能添加了某些ML分类器。 策略: WTL基于强化学习的原则,其中策略是当前状态(此处是当前打开的选项卡的快照)对一组操作的函数。 ...

    java web开发技术大全

    提供典型应用案例,剖析JSP/Servret技术与Struts 2技术在Web开发中的不同 提供完整的应用案例,使读者可以深入体会SSH开发模式的精髓 所有开发工具和框架均使用目前的最新版本,紧跟技术发展的趋势 提供230个实例...

    HTML5与CSS3基础教程(第8版)高清文字

    2.7 在浏览器中查看网页 26 2.8 借鉴他人灵感 28 第3章 基本HTML结构 30 3.1 开始编写网页 30 3.2 创建页面标题 33 3.3 创建分级标题 34 3.4 普通页面构成 36 3.5 创建页眉 37 3.6 标记...

    WEB开发规范.rar

    1.2.3. Session状态开关 7 1.2.4. ASP页面的代码规划 7 1.2.5. 代码中的空行 7 1.2.6. 使用MapPath来引用物理路径 8 1.2.7. 代码中的空格 8 1.2.8. 编程风格 8 1.2.9. 字符串连结 8 1.2.10. UCase与LCase 8 ...

    cotonic:网页的基础结构-MQTT与Web Workers相遇

    在您的网页上发布和订阅主题树在同一浏览器中的标签之间发布和订阅在页面和服务器之间发布和订阅订阅页面和服务器上的主题从服务器发布到页面从页面发布到服务器使用Web Workers的基础架构: 启动和停止Web Worker ...

Global site tag (gtag.js) - Google Analytics