html5自动收回键盘,如何监听移动端软键盘的弹出和收回？

调用移动端的软键盘，一般是和TextInput的操作绑定的。

当点击输入文本框进人输入状态的时候移动端会自动调用软键盘，当输入完毕，点击输入文本框的外部区域或关闭软键盘按钮可完成软键盘收回状态的操作。

通常情况下我们会根据输入文本框的焦点对软键盘执行弹出和收回状态的监听

如下列代码所示private var textInput:TextField;

textInput=new TextField();

textInput.type=TextFieldType.INPUT;

textInput.border=true;

textInput.multiline=true;

textInput.wordWrap=true;

textInput.width=200;

textInput.x=100;

textInput.y=200;

addChild(textInput);

textInput.addEventListener(FocusEvent.FOCUS_IN,onFocusIn);

textInput.addEventListener(FocusEvent.FOCUS_OUT,onFocusOut);

private function onFocusIn(event:FocusEvent):void

{

textInput.text="你的键盘打开了";

}

private function onFocusOut(event:FocusEvent):void

{

textInput.text="你的键盘消失了";

} 但这样操作貌似并不能完全满足我们的需求，因为以上方法只针对于当点击输入文本框获取焦点和点击输入文本框外部区域失去焦点的时候才会触发。而软键盘自身带有关闭按钮，此操作不会触发焦点事件，导致无法监听到软键盘的收回状态，所以FocusEvent的使用并不全面。

----------------------------------------------------------------------------------------------------

不过不用担心，下面的方案将会彻底解决这个问题

当移动端调用软键盘的时候，会导致当前可视窗口显示区域发生改变(软键盘弹出，区域变小，否则反之)，我们通过侦听Event.RESIZE事件可以对当前可视窗口区域的Width和Height属性进行监听，通过判断Width和Height属性是否发生改变来判断当前软键盘的弹出和收回状态。

参考代码如下：package

{

import flash.display.Sprite;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.events.FocusEvent;

import flash.events.KeyboardEvent;

import flash.text.TextField;

import flash.text.TextFieldType;

import flash.ui.Keyboard;

public class TextInput extends Sprite

{

private var textInput:TextField;

private var sourceWidth:Number;

private var sourceHeight:Number;

public function TextInput()

{

//转换成h5项目后获取浏览器的宽度

//[IF-JS]sourceWidth = Laya.window.innerWidth;

//转换成h5项目后获取浏览器的高度

//[IF-JS]sourceHeight = Laya.window.innerHeight;

if(stage)

{

init();

}

else

{

this.addEventListener(Event.ADDED_TO_STAGE,init);

}

}

private function init(e:Event=null):void

{

textInput=new TextField();

textInput.type=TextFieldType.INPUT;

textInput.border=true;

textInput.multiline=true;

textInput.wordWrap=true;

textInput.width=200;

textInput.x=100;

textInput.y=200;

addChild(textInput);

stage.scaleMode=StageScaleMode.NO_SCALE;

//给舞台侦听RESIZE事件，当舞台状态发生改变时触发

stage.addEventListener(Event.RESIZE,onStageChange);

}

protected function onStageChange(event:Event):void

{

var desWidth:Number;

var desHeight:Number;

//获取窗口显示区的宽度。

__JS__('desWidth=window.innerWidth');

//获取窗口显示区的高度。

__JS__('desHeight=window.innerHeight');

if(desHeight!=sourceHeight)

{

textInput.text="OPEN";

}

else

{

textInput.text="CLOSE";

}

}

}

}提示：如果以上代码有看不懂的地方，请大家先学习宏编译的用法

链接：http://layaflash.ldc.layabox.c ... d%3D9