首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Wordress中的Input Type Text旁边添加时,自动删除空的Span类

在Wordpress中,可以通过使用JavaScript来实现在Input Type Text旁边添加时自动删除空的Span类。具体步骤如下:

  1. 首先,在Wordpress的主题文件中找到需要添加自动删除空的Span类的页面或模板文件。
  2. 在该文件中,找到需要添加Input Type Text的位置,并在其旁边添加一个Span元素,例如:
代码语言:txt
复制
<input type="text" id="myInput">
<span class="mySpan"></span>
  1. 接下来,使用JavaScript来实现自动删除空的Span类。可以在页面底部或者在自定义的JavaScript文件中添加以下代码:
代码语言:txt
复制
<script>
    document.getElementById("myInput").addEventListener("input", function() {
        var inputText = this.value;
        var spanElement = document.querySelector(".mySpan");
        
        if (inputText.trim() === "") {
            spanElement.classList.remove("mySpan");
        } else {
            spanElement.classList.add("mySpan");
        }
    });
</script>

上述代码中,我们使用addEventListener方法来监听Input Type Text的输入事件。当输入发生变化时,获取输入框的值,并使用trim方法去除首尾空格。如果输入框的值为空,则移除Span元素的mySpan类;否则,添加mySpan类。

  1. 最后,保存文件并刷新Wordpress页面,就可以看到在Input Type Text旁边自动删除空的Span类的效果了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

  • 产品介绍链接地址:https://cloud.tencent.com/product/cvm
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

将此过滤器添加到 ng-bind-html 、data-ng-bind-html? 所绑定数据,便实现了在数据加载对于 html 标签自动转义。 示例代码: <!...如果表达式结果为一个数组,则数组每个元素为使用空格分隔一个或多个名字符串。 如果表达式结果为一个对象,对象每个key-value如果键值为真则键名作为名。...这个指令不会添加重复,如果这个已经存在的话。 当表达式改变,以前添加会被移除,并且只会添加之后新产生。 ngStyle指令允许你HTML元素上条件化设置CSS样式。... 当条件为true样式出现 Sample Text...[itemN ]]]]); 将一个或多个新元素添加到数组开始,数组元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

15.3K100

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

将此过滤器添加到 ng-bind-html 、data-ng-bind-html? 所绑定数据,便实现了在数据加载对于 html 标签自动转义。 示例代码: <!...如果表达式结果为一个数组,则数组每个元素为使用空格分隔一个或多个名字符串。 如果表达式结果为一个对象,对象每个key-value如果键值为真则键名作为名。...这个指令不会添加重复,如果这个已经存在的话。 当表达式改变,以前添加会被移除,并且只会添加之后新产生。 ngStyle指令允许你HTML元素上条件化设置CSS样式。... 当条件为true样式出现 Sample Text...[itemN ]]]]); 将一个或多个新元素添加到数组开始,数组元素自动后移,返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

12.6K30

Jump Start Bootstrap 第3章

这里,data-target属性持有我们尚未定义部分id。当单击按钮,该部分将被切换。按钮span元素用来显示图标【注:图标横线】。...要显示一个标签,您需要将一个label添加到诸如和这样内联HTML元素。...Bootstrap,你只要给元素、或添加”btn”和”btn-*”,就会把他们转变成花哨粗体按钮。...代码,我们已经根据Bootstrap规则,将表单从”form”替换为”form-horizontal”。然后我们元素添加了一个”col-xs-2”,因此它跨越两个网格。...这些has-*类型只会将颜色应用到表单控件、controllabel和helpblock元素。如果用户输入字段输入无效值,想要显示一些自定义文本,请使用带有帮助块元素。

13.8K20

vue 使用数组splice方法失效,且总是删除最后一项解决办法。

今天写项目的时候,遇到一个很简单需求,下图,点击添加标签,左边出现一个可以输入标签,点击删除按钮, 就能删除当前标签,很简单需求,我却搞了一个多小时(哎…新手愚笨啊) 一看到这个我思路就是点击添加标签...,把新增节点push到自己定义数组里,然后渲染出来,点击删除按钮,用splice方法从数组删除掉当前节点(很简单,很明确思路嘛,但是却事与愿违) <div class...this.tags.push({"tag":""}) }, //删除标签 deleteTag...我问题之所以会产生,是因为在于key绑定问题,我只是用下标来绑定每一个标签key,而没有与数组中元素挂钩,因此当删除数组元素,vue会采用一种叫做’就地复用‘原则,将旁边元素直接拿过来使用,...({"tag":"", 'id':this.tagNum}) }, <div class="addtag"

2.2K20

jQuery基础

需求说明: ​ 页面中有一个图片和一个关闭按钮 ​ 当滚动条向下或向右移动,图片和关闭按钮随滚动条移动,相对于浏览器位置固定 ​ 单击“关闭”按钮,页面图片和关闭按钮不显示 <script...验证提示信息显示在对应表单元素后面,例如:若用户名包含非法字符,文本框后进行提示 关键代码: $("#user").blur(function...,不合法直接在文本框后提示 提交表单,验证数据合法性,不合法文本框后提示 关键代码: $("#user").blur(function...1)点击人员信息表右上角添加按钮,弹出人员详细信息窗口; 2)修改弹出窗口标题为“新建人员信息”; 3)点击确定验证输入框数据是否符合标准;输入标准主要有以下两点: 1,所有的输入框不能为,为显示...1").clone(true); 星级评分 题目:使用Jquery完成投票功能 打开调查页面,界面如下: 如果需要添加其他课程,文本框输入课程名称,点击“添加”按钮完成添加添加需要非判断,

7.2K10

Javaweb08-Ajax项目-分页条件查询 + 增删改

type="text" name="uname" id="uname" placeholder="请输入"用户名> <span id = "showMsg" style...; 这一修改下面的可选值,需要将值设置到表单; 将值放到表单两种方式:(跟页面跳转一样) 1、通过id选择input元素geivalue属性赋值:$("#pageSize")....,而是当内存需要且没有该类实例,才会创建(存在线程不安全)双重校验 饿汉模式 加载,直接创建实例对象,放入内存,需要使用时候,直接返回,不存在线程不安全 6.1 JdbcConfig 数据库配置信息读取.../饿汉:加载,直接创建实例对象,放入内存,需要使用时候,直接返回,不存在线程不安全 private static JdbcConfig JdbcConfig = new JdbcConfig(...); //私有构造方法,保证处理在当前,其他任何地方斗不可以创建实例 private JdbcConfig() { try { //自动实例化 properties properties

4.6K40

Django学习笔记之Django Form表单

Form介绍  我们之前HTML页面利用form表单向后端提交数据,都会写一些获取用户输入标签并且用form标签把它们包起来。...type="text" name="username" id="username"> 密码 用户提交校验功能 • 当用户输错之后 再次输入 上次内容还保留在input框   -->保留上次输入内容 Form那些事儿 常用字段与插件 创建Form,主要涉及到...【字段】 和 【插件】,字段用于对用户请求数据验证,插件用于自动生成HTML; initial 初始值,input框里面的初始值。...: 使用选择标签,需要注意choices选项可以从数据库获取,但是由于是静态字段 ***获取值无法实时更新***,那么需要自定义构造方法从而达到此目的。

1.7K40

Vue 相关学习笔记(一)

按键修饰符 在做项目中有时会用到键盘事件,监听键盘事件,我们经常需要检查详细按键。Vue 允许为 v-on 监听键盘事件添加按键修饰符 <!...如果相等 则添加名 active 否则 添加 名 4.2 、让默认第一项tab栏对应div 显示 实现思路 和 第一个 tab 实现思路一样 只不过 这里控制第一个div 显示名是 current...即将原本绑定在 input 事件同步逻辑转变为绑定在 change 事件上 失去焦点 或者 按下回车键才更新 // 注意点: // 1、 自定义指令 如果以驼峰命名方式定义 如 Vue.directive('focusA...directives 选项 用法和全局用法一样 局部指令只能在当前组件里面使用 当全局指令和局部指令同名以局部指令为准 <input

7.4K20

Baidu Comate全方位测评结果——全栈工程师福音

'), ('添加', NOW(), '管理员', 3, '为王五添加了订单'), ('删除', NOW(), '管理员', 3, '删除了王五订单'), ('添加', NOW(), '管理员', 4,...实际应用,这些值应该根据实际情况动态生成。 此外,log_id字段是自增,因此插入记录无需显式提供该字段值。...页面包含一个表单,其中包含用户名和密码输入框,以及一个登录按钮。当用户点击登录按钮,表单数据将被提交到/loginURL(你可以action属性修改为你自己处理登录请求URL)。...实际效果: 问题2:保持当前代码前提下,添加js代码来控制当用户名与密码为时候无法点击登录按钮。 返回修正代码: <!...(); }); 可以代码中看到对两个input做了非验证。

7500

几个前端技术问题解决思路

一、背景 1、动态上传章节信息,碰到了一系列问题,主要有。 1、js实现动态添加具有相同nameinput 2、动态添加input元素绑定事件失效了。...3、提交保存,多个name相同表单如何判并阻断提交。 2、问题界面展示。 在这个页面,第一个form表单,是开始就有了,第二个是点击按钮后动态添加,它判断是否为是无效。...二、解决方案 1、js实现动态添加具有相同nameinput 1、为了完成业务,我最初html我写了一个form表单,和一个增加按钮。...在此处,我需要实现可以把动态添加表单删除,我添加都加了remove()方法,每次点击,它会自己调用完成操作。...三、总结 以上就是就是关于js实现动态添加具有相同nameinput,动态添加input元素绑定事件失效了,提交保存,多个name相同表单如何判并阻断提交几个问题解决思路以及自己扩展,可以参考一下

1.9K20

JEasyframe使用教程4 模块开发

当然,直接看到界面可能不是这样,像 添加按钮为之类。这里就需要来调一下。...其中索引减就是key,使用值就是value,知道了这,我们就可以添加自己菜单标签了。 所属菜单选择 维修人员管理,查询,是,点 添加,然后添加这个菜单你需要用标签 ?...添加完自己需要一些标签后,保存,然后重新登录。就能看到修改后效果了,jsp里面用标签地方就会自动赋值为中文了。...编辑功能 list.jsp里有编辑和删除入口,删除比较简单,直接带着id删除就行了。说一下编辑功能。...其他没什么说,比较简单。 删除功能只要action里写好就行了。界面数据列表上右键,直接点删除就行了。这里就不多说。 添加功能也不多说了,和edit很像,只不过每个属性都需要列出来。

70220

jQuery

input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的单行文本框,$(":text") 等价于$("...[type=text]"),推荐使用$("input:text")效率更高,下同 $(":password") //所有密码框 $(":radio") //所有单选按钮 $(":checkbox...删除元素/内容 remove() - 删除被选元素(及其子元素) remove() 添加参数,删除对该元素进行过滤 empty() - 从被选元素删除子元素 jQuery 操作 CSS addClass...() - 向被选元素添加一个或多个css removeClass() - 从被选元素删除一个或多个css toggleClass() - 对被选元素进行添加/删除切换操作 css() - 设置或返回样式属性...树 children() - 所有直接子元素 find() - 被选元素所有后代元素,div下所有span:$("div").find("span"); DOM 树水平遍历 有许多有用方法让我们

4.6K10

js实现动态添加具有相同nameinput+动态添加input绑定事件+保存前判断所有name为阻断提交

一、动态上传章节信息,碰到了一系列问题,主要有: 1、动态添加input元素绑定事件失效了。 2、提交保存,多个name相同表单如何判并阻断提交。...二、问题界面展示: (1)在这个页面,第一个form表单,是开始就有了,第二个是点击按钮后动态添加,它判断是否为是无效。...jsappend()方法实现,idea,我直接复制上面的html代码,粘贴进入append方法,他会自己转义,特别方便。...在此处,我需要实现可以把动态添加表单删除,我添加都加了remove()方法,每次点击,它会自己调用完成操作。...(2)formaction右边添加了id为myform。 (3)定义一个初始值i,记录为个数。 (4)使用each函数循环遍历name相同表单,遍历时,判断是否符合,有不符合i值加1。

6K20
领券