默认情况下,一个浏览器里的Flex应用不能在加载时获取焦点。当一个应用开始启动,假设在里面有个login界面并希望用户名的输入框拥有焦点,就会特别让人沮丧。幸好,用一些简单的JavaScript语句可以办到。
注意:这不能用在Safari, Chrome或其它使用Webkit的浏览器中。如果你用的IE和Firefox则没问题。为了示范,让我们假设我们需要用户名的输入框在Flex app加载的时候获得焦点。
首先,设置聚焦到用户名输入区 - 假设一个ViewMediator是这样做的:
Code:
this.view.userNameTextInput.setFocus();
创建一个JavaScript来设置浏览器的焦点为你的Flex应用。在你的Flex project里的index.template.html文件里创建这个方法-只需要放在文件底部的closing HTML tag之前:
Code:
<script type="text/javascript">
function onFlexInitialized()
{
//alert("onFlexInitialized");
<!-- Force the browser to set flex app with focus -->
document.getElementById("${application}").focus();
}
</script>
接下来捕获应用程序的完成事件并调用我们建立的JS方法-我把Flex 3和4的用到的代码都写了出来:
Code:
/**
* Constructor.
*/
public function AppController()
{
FlexGlobals.topLevelApplication.addEventListener(FlexEvent.APPLICATION_COMPLETE, onAppComplete); // Flex 4
//Application.application.addEventListener(FlexEvent.APPLICATION_COMPLETE, onAppComplete); // Flex 3
}
/**
* Handles the application complete event.
*/
protected function onAppComplete(e:FlexEvent):void
{
FlexGlobals.topLevelApplication.removeEventListener(FlexEvent.APPLICATION_COMPLETE, onAppComplete); // Flex 4
//Application.application.removeEventListener(FlexEvent.APPLICATION_COMPLETE, onAppComplete); // Flex 3
if(ExternalInterface.available)
{
ExternalInterface.call("onFlexInitialized");
}
}
这样就完成了。再次重申,这方法不适用于Safari和Chrome。这里是两个浏览器bug的缺陷日志-Chrome, Safari
分享到:
相关推荐
在Flex开发中,自动获取焦点和监听全局键盘事件是两个常见的需求。尤其是在创建桌面应用或需要实时响应用户输入的应用场景中尤为重要。本文将详细介绍如何在Flex环境中实现这两个功能,并解释其背后的原理。 #### ...
- **模糊效果**:对背景图像应用模糊滤镜,使焦点集中在前景元素上。 - **颜色调整**:调整图像的颜色,以适应不同的视觉风格或主题。 #### 示例代码解析 以下代码展示了一个简单的Flex滤镜切换效果实现,具体包括...
Flex3 是Adobe Flex框架的第三个主要版本,它是一款用于创建富互联网应用程序(RIA)的开源开发工具。在Flex3中,自动提示功能是为用户提供快速输入建议的一种交互方式,极大地提升了用户体验。这种功能通常用于搜索...
设置在加载HTML内容时使用的用户代理 设置用于HTML内容的字符编码 为HTML内容定义类似于浏览器的用户界面 创建HTMLLoader类的子类 第章:处理AIR中与HTML相关的事件 HTMLLoader事件 使用ActionScript处理DOM事件 响应...
本篇文章将深入探讨Flash焦点图切换代码的工作原理,以及如何在实际项目中应用。 首先,我们要理解什么是焦点图。焦点图,也被称为幻灯片、轮播图或滑动展示,是一种展示多个元素(通常为图片)并按照一定顺序进行...
1. 初始化:首先,我们需要获取焦点图的所有子元素,包括图片或内容容器,以及用于导航的小圆点或箭头。使用`querySelectorAll()`或`getElementsByClassName()`等方法。 2. 事件监听:为导航按钮添加点击事件监听器...
4. **交互性**:FlexBlog使用CSS伪类(如`:hover`, `:active`, `:focus`)来改变鼠标悬停、点击或获取焦点时元素的样式,增强用户界面的反馈感。 5. **响应式设计**:FlexBlog利用媒体查询(`@media`规则)来针对...
HTML5引入了一些新的表单属性,比如`placeholder`,用于设置输入框的提示文本,`autofocus`使某个输入框在页面加载时自动获取焦点,以及`required`来确保用户必须填写某些字段。 `style.css`是CSS样式表,用于控制...
当输入框(input)位于可滚动的中间区域底部时,一旦输入框获取焦点,软键盘弹出,但输入框并未随之移动到可视区域内。这可能是因为Flex布局在处理内容溢出时没有自动调整元素的位置。 代码示例中,`.box`是一个...
在CSS中,图片容器可能设置为`display: flex`或`column-fill: auto`,以实现响应式布局。而使用jQuery,我们可以通过`.width()`方法获取容器的实时宽度,并根据这个宽度调整图片的大小。例如,`$(".image").css(...
在ActionScript 3 (AS3)中,EVENT是事件...总之,AS3中的EVENT是其强大交互性的基石,理解和熟练掌握事件处理对于开发Flash或Flex应用程序至关重要。通过深入学习和实践,你可以创建出响应丰富、交互性强的应用程序。
- **交互性**:利用CSS伪类(如`:hover`、`:active`、`:focus`)增加鼠标悬停、点击或获取焦点时的视觉反馈。 - **可访问性**:遵循WCAG(Web Content Accessibility Guidelines)标准,确保色彩对比度、文字大小、...
3. **过渡和动画**:利用`transition`和`animation`属性,为界面添加平滑的过渡效果,如输入框获取焦点时的高亮效果。 4. **响应式设计**:通过媒体查询(`@media`),确保登录界面在手机、平板和桌面设备上的视觉...
例如,可以使用`nav ul li`来选中导航菜单的列表元素,`a`用于链接样式,而`:hover`、`:active`和`:focus`伪类则用于定义不同状态下的样式,如鼠标悬停、点击和获取焦点时的效果。 **2. CSS3边框与背景** 为了实现...
此外,为了实现无缝的用户体验,我们需要确保在页面加载时正确设置初始选中的Tab。这可以通过在JavaScript代码中添加初始化逻辑,或者使用HTML5的数据属性(data-*)来存储Tab和内容的关联信息,简化代码的编写。 ...
2.2.2在FlexBuilder3下创建ActionScript3.0项目 15 2.3服务端部署 16 2.3.1安装JDK 16 2.3.2安装Tomcat服务器 18 2.3.3Tomcat集成RED5服务器 20 2.4安装VisualBasic6.0 22 2.5小结 23 第3章ActionScript3.0语法 24 ...
6. **伪类和伪元素**:利用`:hover`、`:active`、`:focus`等伪类改变鼠标悬停、点击或获取焦点时的样式,增强用户体验。 7. **图片处理**:通过`background-image`、`background-size`等属性控制背景图片的显示,...
4. **jQuery事件监听**:在文档加载完成后,使用`.hover()`方法监听悬停事件。当鼠标进入元素时,显示对应的文本,离开时隐藏。 ```javascript $(document).ready(function() { $('.image-container img').hover...
7. **动画效果**:为了增加表单的吸引力,可以使用CSS动画,如输入框获取焦点时的放大效果,或者按钮点击后的加载动画,以提高用户的参与度。 8. **辅助类和重用性**:编写CSS时,考虑使用预处理器(如Sass或Less)...