关于JavaScript的~怎样在文本框输入字的事件里激活按钮事件？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于JavaScript的~怎样在文本框输入字的事件里激活按钮事件？相关的知识，希望对你有一定的参考价值。

文本框文本的每一次变动都会让某个按钮按一次，每输入一个字按钮就自动按一次~怎样实现？
回复janhoosan ：你的可以呀，但是文本框里光标左右移动不用触发按钮事件的呀。。可以改进么
回复 niuniujc：用onkeypress输入中文就没反应
回复lj2tj：好像还行。。不过开始试的时候有时会令整个浏览器自动消失。。进一步测试中。。
回复yasire：。。函数里面能再清楚一点不。。
回复jlake：你的代码不知道用在哪里。。

参考技术A 用 jQuery 就很简单了。
janhoosan 的代码可以改成这样

$('#txt1').keydown(function(e)
$('#btn').trigger('click');
);

如果有问题可以把 keydown 改成 keyup 或 keypress 试试看。

补充：
看来楼主没用过 jQuery，把以下代码保存成 html 文件，用浏览器打开看看：

<head>
<title>javascript 测试</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#txt1').keydown(function(e)
$('#btn').trigger('click');
);

);
</script>
</head>
<body>
<input name="txt1" type="text" onkeydown="document.getElementById('btn').click()"/>
<input type="button" id="btn" value="点我啊" onclick="alert('点我了啊')" />
</body>
</html> 参考技术B 照你说的修改了
<input name="txt1" type="text" onkeydown="if(event.keyCode<37 || event.keyCode>40 ) document.getElementById('btn').click()"/>
<input type="button" id="btn" value="点我啊" onclick="alert('dsadas')" />本回答被提问者采纳 参考技术C 在onkeydown事件里，返回一个方法，在这个方法里，根据keyCode判断用户按的是什么键，然后再执行你的方法。
onkeydown="return test();"
function test()

//do sth.
 参考技术D 在onkeypress中调用按钮事件函数 第5个回答  2010-02-12 使用onpropertychange()事件

javascript实例学习之二——类新浪微博的输入框

该案例实现如下效果，具体可见新浪微博网站的微博发布框

实现 以下效果
效果1：当光标移入文本框时，文本框上方的文字发生变化，显示剩余可以输入的字数，当光标移出文本框，并且文本框中没有任何输入时，恢复最初默认的文字

效果2：文本输入的时候，文本框提示剩余文本数，剩余文本字数随着输入字数而减少,两个字母算一个字，一个汉字算一个字

效果3:当输入框为空，或者输入框内的文本超过140个字的时候，发布按钮不可用，否则可用；在发布按钮不可用的情况下点击发布按钮，文本框会出现红色背景，并闪动两次

对应的html代码：

技术分享 
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>微博发布框效果</title>
    <style>
        body{font-size: 12px}
        div{width:400px;margin:20px auto;}
        div p{float:right; }
        div textarea{width:100%;height:150px;}
        div a{float:right;padding:10px 20px;font-size: 16px;background:#0f0;color:#fff;}
        div a.disable{background: #ccc;color:#666;}
    </style>
</head>
<body>
    <div id="div1">
        <p>他们都在读什么？企业#大咖私藏书单#，领导者的思想盛宴　</p>
        <textarea name="" id=""  ></textarea>
        <a href="#" class="disable">发布</a>
    </div>
    <script src="js/weiboInput.js"></script>
</body>
</html>
微博发布框html代码

 

对应的javascript代码：

技术分享 
//实现 以下效果
//效果1：当光标移入文本框时，文本框上方的文字发生变化，显示剩余可以输入的字数
//当光标移出文本框，并且文本框中没有任何输入时，恢复最初默认的文字

//效果2：文本输入的时候，文本框提示剩余文本数，剩余文本字数随着输入字数而减少,两个字母算一个字，一个汉字算一个字

//效果3:当输入框为空，或者输入框内的文本超过140个字的时候，发布按钮不可用，否则可用；在发布按钮不可用的情况下点击发布按钮，文本框会出现红色背景，并闪动两次

document.addEventListener(‘DOMContentLoaded‘, function() {
    var oDiv = document.getElementById(‘div1‘);
    var oP = oDiv.getElementsByTagName(‘p‘)[0];
    var oT = oDiv.getElementsByTagName(‘textarea‘)[0];
    var oA = oDiv.getElementsByTagName(‘a‘)[0];
    //实现效果1
    oT.addEventListener(‘focus‘, function() {
        oP.innerHTML = "还可以输入<span>140</span>个字";
    }, false);
    oT.addEventListener(‘blur‘, function() {
        if (!this.value) {
            oP.innerHTML = "他们都在读什么？企业#大咖私藏书单#，领导者的思想盛宴";
        }

    }, false);

    //实现效果2,连续输入在标准下触发的是input事件，在ie中触发的是onproperty事件
    oT.addEventListener(‘input‘, function() {

        var oS = oDiv.getElementsByTagName(‘span‘)[0];
        var curLength = Math.ceil(getLength(oT.value) / 2);
        if (curLength <= 140) {
            oS.innerHTML = 140 - curLength;
        } else {
            oS.innerHTML = curLength - 140;
            oS.style.color = ‘red‘;
        }
        if (curLength <= 0 || curLength > 140) {
            oA.className = ‘disable‘;
        } else {
            oA.className = ‘‘;
        }

    }, false);

    function getLength(str) {
        return str.replace(/[^\x00-\xff]/g, ‘aa‘).length;
    }

    //实现效果3

    oA.addEventListener(‘click‘, function() {
        var timer;
        var num = 0;
        if (oA.className === ‘disable‘) {
            //文本框的背景变成红色并且闪动两次
            // clearInterval(timer);
            // timer = setInterval(function() {
            //     num++;
            //     if (num == 4) {
            //         clearInterval(timer);
            //         num = 0;
            //     }
            //     if (num % 2) {
            //         oT.style.background = ‘pink‘;
            //     } else {
            //         oT.style.background = ‘‘;
            //     }

            // }, 150);

            //尝试利用超时调用来模拟间歇调用
            clearTimeout(timer);

            function changeBgColor() {

                num++;
                if (num >= 5) {
                    clearTimeout(timer);
                    num=0;
                    return;
                }
                if (num % 2) {
                    oT.style.background = ‘pink‘;
                } else {
                    oT.style.background = ‘‘;
                }
                timer = setTimeout(changeBgColor, 150);
            }
            timer = setTimeout(changeBgColor, 150);
        } else {
            alert(‘微博已发布！‘);
        }
    }, false);

}, false);
微博发布框javascript代码

 

收获：

1.背景闪动！联系动画！

2.文本框连续输入事件，ie下是onpropertychange,标准下是input

 

以上是关于关于JavaScript的~怎样在文本框输入字的事件里激活按钮事件？的主要内容，如果未能解决你的问题，请参考以下文章

javascript实例学习之二——类新浪微博的输入框

JavaScript：将关键事件模拟​​到文本框/输入中

MFC文本框字体颜色设置

怎样做EXCEL随机姓名生成器...生成3个字的姓名

VB文本框怎样限制只能输入数字值

javascript中怎样添加下拉列表框的option到指定位置