Rumah > hujung hadapan web > tutorial js > jquery失去焦点事件了blur的示例代码分享

jquery失去焦点事件了blur的示例代码分享

黄舟
Lepaskan: 2017-06-26 14:13:07
asal
2054 orang telah melayarinya

jquery中失去焦点 事件我们只要使用blur来绑定就可以了,这样我们可以实时监控到输入框的blur动作了。

一个监制text事件

$(function () {
$(':text').blur(function () {
if ($.trim($(this).val())=='') {
$(this).css('border', 'red');
} else {
$(this).css('border','white');
}
});
});
Salin selepas log masuk

实例

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
 //失去焦点时判断(一个公用的方法,在文本框里写事件调用这个方法)
        function OnFousFun(element1, element2, text) {
            if ($(element1).val() == "" || $(element1).val() == text) {//输入框里值为空,或者为一些特定的文字时,都提示输入不能为空
                $(element2).html("输入不能为空");
                return false;
            }
            else {
                $(element2).html("");
                return true;
            }
        }
</script>
Salin selepas log masuk

页面代码

<tr>
                <th>
                    校长证件号码</th>
                <td>
                    <asp:TextBox ID="txtCardID" runat="server" CssClass="formbox" TabIndex="1" MaxLength="50"
                       Text=&#39;15位或18位&#39; onblur="OnFousFun(&#39;#ContentPlaceHolder1_txtCardID&#39;,&#39;#ContentPlaceHolder1_Label1&#39;,&#39;15位或18位&#39;)">
                       </asp:TextBox>
                    <asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
                </td>
            </tr>
Salin selepas log masuk

说明:onblur是文本框失去焦点时的事件

Atas ialah kandungan terperinci jquery失去焦点事件了blur的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan