使用伪元素简单实现input框的判断√×

梦里梦外; 2022-07-12 00:27 9阅读 0赞

一些表单中的输入框输入之后会进行判断，会在input框之后以√×来表示判断的结果，下面我使用伪元素来简单的实现这个功能。代码如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>使用伪元素简单实现input框后的√×</title>
        <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
        <style type="text/css"> body { font-family: "微软雅黑"; font-size: 20px; color: #000; } label { height: 24px;line-height: 24px; } input { height: 24px;line-height: 24px; } .true:after { display: inline-block; content: '√'; width: 20px; height: 20px; vertical-align: middle; line-height: 24px; color: green; } .false:after { display: inline-block; content: '×'; width: 20px; height: 20px; vertical-align: middle; line-height: 24px; color: green; } </style>
    </head>
    <body>
    <label id="inputBox"><input type="text" name="user" id="input"></label>
    <script> $("#input").blur(function(){ if($(this).val() == "对"){ $("#inputBox").removeClass("false").addClass("true"); }else if($(this).val() == "错"){ $("#inputBox").removeClass("true").addClass("false"); } }); </script>
    </body>
    </html>

使用js或者jQuery好像获取不到伪元素，我试了几种方法都显示undefined，至于原因我看网上说的是伪元素不是Dom节点，所以是获取不到的。（我用的jQuery版本是1.11.3，其他版本没有试）。  
最后是采用加减class类名来实现的，将两个状态下的伪元素绑定在两个类名之后，在不同的判断结果时候只需要添加或删除相应的class类名即可。

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 Input输入框（antd-design组件库）简单使用

1.Input输入框通过鼠标或键盘输入内容，是最基础的表单域的包装。 2.何时使用需要用户输入表单域内容时。提供组合型输入框，带搜索的输入框，还可以进行大

Myth丶恋晨/ 2023年10月14日 14:44/ 0 赞/ 53 阅读

相关伪类与伪元素

首先，阅读 `w3c` 对两者的定义： `CSS` 伪类用于向某些选择器添加特殊的效果。 `CSS` 伪元素用于将特殊的效果添加到某些选择器。可以明确两点，第

一时失言乱红尘/ 2022年09月30日 03:47/ 0 赞/ 305 阅读

相关 css伪元素的使用

[CSS 巧用 :before和:after][CSS _ _before_after] 前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问

朴灿烈づ我的快乐病毒、/ 2022年06月02日 05:38/ 0 赞/ 291 阅读

相关简单了解伪类和伪元素的区别

使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？下面我们就来聊聊两者，这个介绍的不多，主要还是聊聊伪元素的一些特点，

红太狼/ 2022年05月28日 10:44/ 0 赞/ 290 阅读

相关判断两个input输入框的值(int)

<input type="text" class="" value="" placeholder="" id="input1" name=""> <input

本是古典何须时尚/ 2022年05月24日 22:13/ 0 赞/ 224 阅读

相关 CSS伪元素实现三角形

什么是伪元素： css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用

我就是我/ 2022年05月21日 03:41/ 0 赞/ 375 阅读

相关如何使用:after伪元素和:before伪元素

:after伪元素和:before伪元素分别用于在元素之后和之前添加内容，实际网页开发过程中:after伪元素比较常用，借助:after伪元素一般用于清除浮动，如下代码：

分手后的思念是犯贱/ 2022年05月17日 02:52/ 0 赞/ 653 阅读

相关 input type="search" 实现搜索框。

欲实现一个文字搜索的功能，要求输入时，键盘回车按钮提示显示为“搜索”。效果如下: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

叁歲伎倆/ 2022年03月10日 12:28/ 0 赞/ 348 阅读

相关伪类与伪元素

一、伪类伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素

野性酷女/ 2022年03月02日 04:08/ 0 赞/ 435 阅读

相关伪元素与伪类的使用

伪元素伪类听名字可能就会产生迷惑，其实从名称上我们也可以获取一些信息，伪元素——顾名思义是一个元素，伪类——与类class有关系，不是一个元素！在CSS1和CSS2中对伪类

傷城~/ 2021年09月20日 15:32/ 0 赞/ 512 阅读