谷歌浏览器js获取焦点(谷歌浏览器 javascript)

这篇文章给大家聊聊关于谷歌浏览器js获取焦点，以及谷歌浏览器 javascript对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

本文目录

JS中如何判断一元素是否获得焦点
js获得焦点是什么意思
js中如何获得焦点
NW.js是什么如何使用
js 函数里面的focus()是干嘛的
js 下拉框获取焦点后 ,自动展开选项内容

一、JS中如何判断一元素是否获得焦点

1、js判断一个文本框是否获得焦点。

//可以用document.activeElement判断。

//document.activeElement表示当前活动的元素。

varmyInput=document.getElementById('myInput');

if(myInput==document.activeElement){

2、文本框获取焦点后执行的方法。

$(".input").focus(function(){......})

$(".input").blur(function(){......})。

<mce:script language="javascript"><!--

var ctrl=document.getElementById("UserName");

//--></mce:script></head>

姓名：<input type="text" id="UserName">

使用JS取得焦点(focus)元素代码：

应用程序的可用性和可访问性的一个重要组成部分是输入焦点(focus)的处理，但这又是开发人员常常会忽视的一点。

对输入焦点处理很差的一个例子:在点击一个链接以后打开一个窗口，但却不将光标聚焦到窗口中的任何元素内。

甚至更糟的是:聚焦到模态窗口中的某个元素，但在关闭以后焦点照样不返回。理想情况下，在触发链接时会保存一个引用，然后将光标聚焦到新窗口，并在窗口关闭时把光标重新移回去。

使用 document.activeElement来查找当前选中的元素是很容易的事:

var focusedElement= document.activeElement;

var triggerElement= document.activeElement;

这个属性不仅在常规输入元素上可用,包括表单字段或<a>标签链接,而且只要设置了 tabIndex属性的任意元素都是可用的。

二、js获得焦点是什么意思

1、这个是HTML DOM对象的方法,并不是js的函数,js只是调用对象的focus方法.该方法表示将输入焦点移至对象上.

2、HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用于HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。例如Javascript就可以利用HTML DOM动态地修改网页。

3、DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面中其他的标准组件。简单理解，DOM解决了Netscape的JavaScript和 Microsoft的JavaScript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。

4、在 HTML DOM中，所有事物都是节点。DOM是被视为节点树的 HTML。

5、每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

6、nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）

7、根据W3C的 HTML DOM标准，HTML文档中的所有内容都是节点：

三、js中如何获得焦点

利用js中<input/>实现文本框默认获取输入焦点完整代码实现如下：

<title>Insert title here</title>

var pFocus= document.getElementById("password");

JavaScript使我们有能力创建动态页面。事件是可以被 JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick事件来触发某个函数。事件在HTML页面中定义。

四、NW.js是什么如何使用

本文主要和大家分享NW.js是什么如何使用？NW.js（原名 node-webkit）是一个基于 Chromium和 node.js的应用运行时，通过它可以用 HTML和 JavaScript编写原生应用程序。它还允许您从 DOM调用 Node.js的模块，实现了一个用所有 Web技术来写原生应用程序的新的开发模式。

（1）以网络最流行的技术编写原生应用程序的新方法

（2）基于HTML5, CSS3, JS and WebGL而编写

（3）完全支持nodejs所有api及第三方模块

（4）可以使用DOM直接调用nodejs模块

（6）支持运行环境包括32位和64位的Window、Linux和Mac OS

1.下载 NW.js（官网：）

这里面normal这个算是运行时吧，sdk那个是一些工具箱，建议都下下来~

2.下载 Enigma Virtual Box（官网：）

"description":"使用nw.js封装的一个微信公众号菜单编辑器App",

"keywords": ["微信","菜单编辑器" ],

"icon":"app/static/img/weixin_logo.jpg",

"chromium-args":"-allow-file-access-from-files"

}title:字符串，设置默认 title。

toolbar: bool值。是否显示导航栏。

position:字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。

min_width/min_height:窗口的最小值。

max_width/max_height:窗口显示的最大值。

resizable: bool值。是否允许调整窗口大小。

always-on-top: bool值。窗口置顶。

fullscreen: bool值。是否全屏显示。

show_in_taskbar:是否在任务栏显示图标。

frame: bool值。如果设置为 false，程序将无边框显示。

"chromium-args":"-allow-file-access-from-files"相当于给谷歌浏览器添加启动参数一样，这行代码允许angularjs直接访问本地json文件。

将html项目压缩成zip，并改名为nw,输入以下命令

copy/b nw.exe+app.nw firstApp.exe四、打发包发布

打开 Enigma Virtual Box程序（enigmavb.exe），界面应该是这样的：

然后在 Enter Input File Name处选择上一步生成的 test.exe文件，Enter Output Name可以默认；

之后再点击下面的 Add按钮，将 nwjs文件夹（名称不一定是 nwjs，就是最开始第一步 NW.js环境的那个文件夹）下除 nw.exe和 test.nw以及 test.exe之外的所有文件加载上，然后点击 Process，等待执行成功即可，这时候会在相应的路径下生成一个新的.exe文件（我们暂且叫做 newtest.exe），此时的 newtest.exe文件即可在任意的 Windows环境下运行了，你可以拷贝给你的小伙伴去 Show一下。

1.如果只希望当前应用获取焦点才执行快捷键，看看这个库用js设置快捷键

var gui= require('nw.gui');

alert("全局快捷键"+ this.key+"按下");

var shortcut= new gui.Shortcut(option);

gui.App.registerGlobalHotKey(shortcut);

//解除注册，在应用结束的时候执行

gui.App.unregisterGlobalHotKey(shortcut);2.nw.js不能对页面多次刷新，各种不正常，这是由于刷新页面后重新加载js文件对变量重新赋值引起的bug。解决方案

<title>nw.js实现文件读写</title>

var chooser= document.querySelector('#readFile');

chooser.addEventListener("change", function(evt){

var filePath= this.value.toString();

document.querySelector("p").innerHTML="读取文件从"+ filePath;

fs.readFile(filePath, function(err, data){

layer.msg("读取文件失败!:"+ err.message);

chooser= document.querySelector('#writeFile');

chooser.addEventListener("change", function(evt){

var filePath= this.value.toString();

document.querySelector("p").innerHTML="写入文件到："+ filePath;

fs.writeFile(filePath,"Hello!\n", function(err){

</html>3.使用nwjs的'fs'直接保存cancas为本地图片，在网上找到的方法都是弹出选择框保存，但我需要直接保存图片到指定路径，不能弹出对话框让用户选择。kailniris给了一个解决方案，可行，代码如下：

var fs= require('fs');

var c= document.getElementById("myCanvas");

base64Data= c.toDataURL("image/png").replace(/^data:image\/png;base64,/,"")

fs.writeFile("c:/Dev/test.png", base64Data,'base64', function(err){

return res.json({'status':'success'});

});用html2canvas把html页面转换为图片，再把图片保存到本地。贴一下代码（需要导入html2canvas.js和jquery）：

var filePath= templateDir+ filename+'.html';

var editerDocument= window.editor.edit.iframe.get().contentWindow.document;

html2canvas(editerDocument.body,{

onrendered: function(canvas){

var base64Data= canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/,"")

fs.writeFile(templateDir+ filename+'.png', base64Data,'base64', function(err){

$('#model_template_name').modal("hide");

layer.msg("模板已保存为"+ filename);

});4.在app.js里引用Node内置模块

$scope.fs= require('fs');

$scope.readConfig= function(){

var configStr=$scope.fs.readFileSync(config.weixin.path,'utf8');

var obj= eval('('+ configStr+')');

$scope.weixin.appid= obj.appid;

$scope.weixin.appsecret= obj.appsecret;

$scope.weixin.qrcodeurl= obj.qrcodeurl;

alert("读取微信配置文件失败");

$scope.writeConfig= function(){

var configStr= JSON.stringify($scope.weixin);

$scope.fs.writeFileSync(config.weixin.path, configStr,{encoding:'utf8'});

alert("写入微信配置文件失败");

$scope.wechatApi= require('wechat-api');

var api= new$scope.wechatApi($scope.weixin.appid,$scope.weixin.appsecret);

api.getMenu(function(err, result){

$scope.$apply();//需要手动刷新

五、js 函数里面的focus()是干嘛的

1、在JavaScript中，focus()虽然比较罕见，但还是比较有用的，

2、主要是用于获取焦点，说白了，就是自动把光标放到此组件上面，无须用户再次操作。

3、上述代码，设置在打开网页5秒之后，无须用户操作，focus()方法会自动将光标放到id为text_2这个文本框。

4、在IE中，window.self.focus();还会起作用。5秒后，窗口还会自动获得焦点，切换到其他窗口，或者其他程序，等5秒，IE浏览器还会自动返回到前台，成为活动窗口，而在野狐禅等其他浏览器中不适用。火狐、谷歌等为了安全性，设置浏览器无法实现控制用户行为。在其他程序应用时，让浏览器获取窗口焦点这个是无法做到的。最少在浏览器内部js无法做到。

5、不过对于chrome或者firefox，safari之类的浏览器可以用过Notification这个类来做一个弹出通知。然而notification必须要支持html5，太麻烦。目前要求窗口获取焦点，基本上用alert去实现。

6、由于IE的window.self.focus();是其作用的，不被禁止的，配合onblur()获取焦点事件，还能构造一个死循环，让IE崩溃，如下的代码：

六、js 下拉框获取焦点后 ,自动展开选项内容

楼上的17kxx_com，楼主用的是 textbox服务器端控件-_-||,

2.使用服务器端控件，也就是textbox控件的onchange事件，但是这个是会回发的.

这个需求最好使用纯前台脚本(html+javascript)实现，不建议使用asp.net服务器端控件的服务端事件（因为会回发，也就是页面会刷新一次，比较难看）,下面是方法1的实现代码:

<asp:TextBox ID="txtA" onblur="changetText()"....>

<asp:TextBox ID="txtB"..........>

textbox对应会生成相应的html代码.

document.getElementById("txtB").value=document.getElementById("txtA").value

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default"%>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

document.getElementById("txtB").value= document.getElementById("txtA").value;

<asp:TextBox ID="txtA" runat="server" onblur="changetText()"></asp:TextBox>

<asp:TextBox ID="txtB" runat="server"></asp:TextBox>

好了，关于谷歌浏览器js获取焦点和谷歌浏览器 javascript的问题到这里结束啦，希望可以解决您的问题哈！

声明：信息资讯网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，版权归原作者东方体育日报所有。若您的权利被侵害，请联系删除。

本文链接：http://www.gdxhedu.com/news/187719.html