asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似于QQ)

1、也许讲解有点初级,希望高手不要“喷”我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13;
2、如有什么不对的地方,还希望大家指出,一定虚心学习,如果有更好的办法请告诉我一声哦;
3、本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢。
下面开讲:
  如题,这个功能也困扰了我一两天事件了,我也上网找了很多资料,但是网上大部分的说法都差不多,问题始终还是没解决,于是乎我开始找是问题的根源,我开始用的是文本框的onkeydown事件,分别写了两个js函数,如下:


代码如下:

//enter发送
function IsEnter(evt)
{
if(window.event.keyCode ==13)
{
send();
return false;
}
}
//ctrl+enter发送
function IsEnterAndCtrl()
{
if(window.event.keyCode ==13 && window.event.ctrlKey)
{
send();
return false;
}
}

然后我就用文本框的onkeydown事件来调用这两个函数,可以一直效果不出来,我就调试,发现event永远都是undefined,我无语了,然后我就换方法了,我把onkeydown函数里面加了一个event参数,在IsEnter(evt)里面也定义了一下var obj = window.event ? evt.keyCode : evt.which;//window.event是针对IE,evt.keyCode是针对FF,这样这个问题就解决了,就不会出现undefined错误了。
  接下来问题又来了,我发现onkeydown事件只要你按键盘上的任意键就会触发这个事件,那么就无法实现ctrl和enter同时按了,又是一个纠结的问题啊,还有我们有onkeydown事件就有onkeyup事件,接下来我就把onkeydown事件换成了onkeyup事件了,这样问题就解决了。
  好了,问题是越解决越少了,下面要做到是如何做到enter与ctrl+enter切换实现是换行还是发送消息?为了兼容性,我又定义了一个变量 var e = evt || window.event;我就是通过obj与e来实现换行与发送切换的,详细js代码如下:


代码如下:

//enter or ctrl+enter发送
function IsEnter(evt)
{
var obj = window.event ? evt.keyCode : evt.which;
var e = evt || window.event;
var type = document.getElementById("sendtype");
var txt = document.getElementById("txtcontent");
if(type.innerHTML=="[Enter发送消息]")
{
if(obj ==13 && !(e.ctrlKey))
{
send();
e.returnValue = false;
txt.value="";
return false;
}
if(e.ctrlKey && e.keyCode==13)
{
txt.value +="\n";
}
}
else
{
if(e.ctrlKey && e.keyCode==13)
{
send();
return false;
}
}
}

注意:以上代码我都已经在IE6、IE8、FF里测试过,绝对有用,由于按enter发送消息的时候会与换行冲突,所以我用e.returnValue = false;txt.value="";不知道有没有更好的方法?

(0)

相关推荐

  • JS 退出系统并跳转到登录界面的实现代码

    Index.aspx页面 Login.aspx 在Index.aspx页面写入JS代码: 复制代码 代码如下: <script language="javascript" type="text/javascript">    function logout(){//        if (confirm("您确定要退出控制面板吗?"))            top.location = "../Login.aspx&quo

  • 在uiview 的tableView中点击cell进入跳转到另一个界面的实现方法

    1.先重写uiviewcontrol的方法 - (UIViewController *)viewController { for (UIView* next = [self superview]; next; next = next.superview) { UIResponder *nextResponder = [next nextResponder]; if ([nextResponder isKindOfClass:[UIViewController class]]) { return

  • js实现界面向原生界面发消息并跳转功能

    本文实例为大家分享了js界面向原生界面发消息并跳转的具体代码,供大家参考,具体内容如下 步骤一 在idea中,打开rn项目下的./Android/app,这个过程需要一点儿时间,可能还需要下载gradle的依赖什么的. 步骤二 跟做原生app没差,我们新建一个TestActivity,简单起见,仅实现如下: public class TestActivity extends AppCompatActivity { private Button mBtGoBack; @Override prote

  • Android编程使用Fragment界面向下跳转并一级级返回的实现方法

    本文实例讲述了Android编程使用Fragment界面向下跳转并一级级返回的实现方法.分享给大家供大家参考,具体如下: 1.首先贴上项目结构图: 2.先添加一个接口文件BackHandledInterface.java,定义一个setSelectedFragment方法用于设置当前加载的Fragment在栈顶,主界面MainActivity须实现此接口,代码如下: package com.example.testdemo; public interface BackHandledInterfa

  • Android中应用界面主题Theme使用方法和页面定时跳转应用

    主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类:  复制代码 代码如下: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为能话框模式 android:theme="@android:style/Theme.NoTitleBar"

  • Activit跳转动画之界面上某个位置并裂开上下拉伸动画跳转

    需求:Activity(fragment)跳转的时候当前界面裂开,上下各自拉出手机屏幕,之后跳转到相对应的Activity.整体效果图如下 思路:1,在当前Activity中截取当前手机的屏幕获取到bitmap,然后根据具体位置(比如这里是扫码图标中间裂开)计算获取到,中间裂开距离手机上和下的距离,在传递给跳转后的Activity (跳转前的Activity做两件事情,1,截取屏幕获取bitmap2,计算出具体裂开位置距离屏幕上下的距离,传递给第二个activity方便来切割真个截图) 2,跳转

  • IOS应用内跳转系统设置相关界面的方法

    在iOS开发中,有时会有跳转系统设置界面的需求,例如提示用户打开蓝牙或者WIFI,提醒用户打开推送或者位置权限等.在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个prefs值,如下图: 跳转系统设置根目录中的项目使用如下的方法: _array = @[ @{@"系统设置":@"prefs:root=INTERNET_TETHERING"}, @{@"WIFI设置":@"prefs:root=WIFI&qu

  • IOS程序开发之跳转短信发送界面实现发送短信功能

    项目需求:在程序开发中,我们需要在某个程序里面发送一些短信验证(不是接收短信验证,关于短信验证,传送门:http://www.cnblogs.com/wolfhous/p/5096774.html 项目实现: 新建demo,直接看我源码标志. 源码截图 真机截图 就是如此简单,如您有任何问题/建议或者更好的实现方法,联系本人. 可以看我折叠的源码 /** 点击发送短信按钮*/ - (IBAction)sendMessageBut:(id)sender { /** 如果可以发送文本消息(不在模拟器

  • 总结IOS界面间跳转的几种方法

    注意: 下面以FirstViewController(FVC)的按钮button点击后跳转到SecondViewController(SVC)为例说明: 方式一:Storyboard的segues方式 鼠标点击按钮button然后按住control键拖拽到SVC页面,在弹出的segue页面中选择跳转模式即可 优点:操作方便,无代码生成,在storyboard中展示逻辑清晰 缺点:页面较多时不方便查看,团队合作时可维护性差, 多人合作时不建议使用这种方式. 方式二:选项卡UITabBarContr

  • php+js iframe实现上传头像界面无跳转

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: 复制代码 代码如下: //route 为后端接口 //upload/avatar 为上传的头像的保存地址 //imgurl=/upload/avatar/<?=$uid?> 这里最后的<?=$uid?>是为了后面用js实现即时显示最新的更换后的头像用的,参照下面的js部分的代码 //头像保存名称为uid.type,如1.jpg,2.png等 //$user['avatar'] 用户如果上传过

随机推荐