js原生：把 input输入的文本，通过点击事件之后 input框内输入的文字消失，出现在下面的 div中。

最新推荐文章于 2023-07-12 15:38:57 发布
最新推荐文章于 2023-07-12 15:38:57 发布
阅读量2.2k 收藏 4
点赞数
分类专栏： js原生 文章标签： js原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43618932/article/details/89162246
版权
  • js原生：把 input输入的文本，通过点击事件之后 input框内输入的文字消失，出现在下面的 div中。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 100px;
        height: 100px;
    }
    </style>
</head>

<body>
    <input type="text" id="inp">
    <button class="btn">按钮<tton>
    <ul class="box">
        <li><>
    </ul>
</body>

<ml>
<script>
    var ary = []
    var btn = document.getElementsByClassName('btn')[0],
        box = document.getElementsByClassName('box')[0],
            btn.onclick = function () {
            	<--通过点击事件新创建声明一个 text 获取到 input.value-->
                var text = inp.value;
                <--创建一个新数组(ary) push 此时获取到 input内容的text-->
                ary.push(text)
                for (let i = 0;i<ary.length;i++) {
                	<--再点击事件中 for 循环 ary数组中的每一项(ary[i]);-->
                    var lis = document.createElement('li')
                    <--在 for 循环中创建一个 li标签，把数组中的每一项都添加到 li标签内-->
                    lis.innerHTML=ary[i]
                    <--把此时的 li标签添加到 HTML结构 box中-->
                    box.appendChild(lis)
                }
                inp.value = '';
                ary = []
            }
</script>
陈浩然哦
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现input输入框输入信息后出现下拉选择框
08-17
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
js实现input文本框点击时文字消失，失去焦点时文字出现
04-14
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1744279
点击input框时，在input框下边展示一个div
weixin_33862993的博客
05-26 1348
//此处在div中的ul是一个ztree树var html='<div id="'+btnName+'DropDown" style="display: none;position:absolute; height:200px; min-width:150px; background-color:white;border:1px solid;overflow-y:auto;ove...
原生js的input事件
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
06-08 1万+
1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。 3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。 4.onkeydown 按下按键时的事件触发， 5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过 6.on..
JS input默认值点击消失
gaojian2008cnn的专栏
04-10 1043
无标题文档 function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload!= 'function' ){ window.onload = func; } else{ window.onload = function(){ oldonload(); f
原生js简易提示框 input 点击文字消失
11-11
在这个场景中，我们关注的是`input`元素的`focus`事件，因为当用户点击输入框时，我们希望提示框消失。例如： ```javascript var input = document.querySelector('input'); var tipBox = document....
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
10-24
在JavaScript编程中，有时我们需要实现在用户在文本框（`<textarea>`）中输入内容时，页面中的其他元素（如`<div>`）能够实时显示这些输入。这通常用于创建实时预览、编辑器功能或者反馈用户输入的效果。在给定的...
input输入框的自动匹配(原生代码)
12-11
这通常涉及到监听`input`或`keyup`事件，对输入的值进行处理，然后与预定义的列表进行匹配，将匹配到的项目展示在输入框下方。 8. **HTML结构**： - 创建一个`<div id="wrap">`包含输入框`<input>`，以及一个`<div...
input-component:可重用的输入组件-REACT JS
04-18
在React JS中，创建可重用的输入组件是构建高效且可维护的用户界面的关键步骤。这个名为"input-component"的项目就是一个实例，展示了如何在React应用中设计和实现一个可复用的输入组件。在React中，组件是UI的基本...
js input 点击消失
skalpat的博客
04-04 458
<input name="mycall" type="text" id="mycall" value="请输入您的手机号码" onfocus="if (value =='请输入您的手机号码'){value =''}" onblur="if (value ==''){value='请输入您的手机号码'}" class="first" /> ...
js实现鼠标点击input框后里面的内容就消失代码
G19931112的博客
08-10 336
<!--# <a href="http://www.mianfeimoban.com/texiao_mb/" target="_blank" class="keylink">特效</a>来源：http://www.mianfeimoban.com --> <!-- 把下列代码加到<body>区域中 --> ...
html js显示文本框的值,html、js输入框输入正确数值显示div
weixin_36087905的博客
06-03 705
有个页面，index.html；上面有个input输入框，通过js判断数值正确与否，当数值未输入或者输入错误，均不不显示div，当数值输入正确，则显示div这个数值来源是php调用过来的，调用的代码是vartimeSpan=10*1000;//10秒钟请求一次php，要改成其他的间隔修改这里，单位为毫秒functiongetCode(){//注意修改这里的路径，如果index.htm...
点击input文本框，文字消失 JS
weixin_34372728的博客
01-08 1187
&lt;HTML&gt; &lt;HEAD&gt; &lt;title&gt;点击input文本框，文字消失&lt;/title&gt; &lt;script type="text/javascript"&gt; //得到焦点触发事件 function OnfocusFun(element,elementvalue) { if(element.value...
js原生input实现原生文件选择上传方法
qq_46023286的博客
07-12 819
import { selectFile } from "地址/文件名.js"
原生js实现inputA的值实时显示在inputB
qq_41851315的博客
12-03 639
因为没有使用框架，所以记录一下原生js实现inputA输入的值实时显示在inputB <input type="text" name="A" id="A"> <input type="text" name="B" id="B"> 两个input分别为A和B 使用onkeyup侦听键盘输入事件，然后使用onblur来实现inputB显示内容 代码如下 &lt...
原生js 写input 框，全选 -- 反选
weixin_45379180的博客
09-23 465
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title
input输入框的原生事件
m0_56683897的博客
12-09 3554
输入框内容发生变化时触发。(值得注意的是，change事件仅在文本域有效，包括textarea，select)输入框的value值发生变化时就会触发，与change不同，input不用等到失去光标时便会触发。当使用拼音输入法开始输入汉字，文本段落的组成完成或取消时触发。失去焦点，鼠标光标焦点从输入框内移除，不能再输入内容后触发。当使用拼音输入法开始输入汉字，字符被输入到文字时。当使用拼音输入法开始输入汉字时触发。聚焦，鼠标光标聚焦在输入框内时触发。点击事件，鼠标点击输入框时触发。
input和div模仿select，带输入提示
anyu0190的博客
01-29 196
有时候我们需要select和input的结合体，即可以使用下拉框，同时也可以用来输入，输入的同时显示可选的下拉选项 先上html代码 <div class="input-group input-group-sm has-warning"> <span class="input-group-addon">label内容</span...
控制 input 输入框不能输入中文，即不能在输入框中使用输入法
热门推荐
zh921112的专栏
08-11 2万+
设置输入框的样式，代码如下
vue中怎么写原生input的失焦事件
最新发布
09-18
### 回答1： 在Vue中，如果你想要监听原生的`input`事件，可以使用`v-on`指令或者`@`语法糖来监听。例如： ``` <template> <div> <input type="text" v-on:input="handleInput" /> </div> </template> <script> export default { methods: { handleInput(event) { console.log('input value:', event.target.value); }, }, }; </script> ``` 在这个例子中，我们在`<input>`元素上使用了`v-on:input`指令来监听`input`事件，当输入框中的内容发生变化时，会调用`handleInput`方法。`handleInput`方法会接收一个`event`对象作为参数，通过`event.target.value`可以获取输入框中的值。 如果你发现原生的`input`事件在Vue中无法触发或者无法正常工作，可能是因为你在组件中使用了`v-model`指令。`v-model`会将`input`事件和`value`属性绑定在一起，当输入框中的内容发生变化时，会自动更新组件的`data`中的对应属性。这种情况下，你需要使用`.native`修饰符来监听原生的`input`事件。例如： ``` <template> <div> <input type="text" v-model="inputValue" v-on:input.native="handleInput" /> </div> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleInput(event) { console.log('input value:', event.target.value); }, }, }; </script> ``` 在这个例子中，我们在`<input>`元素上使用了`.native`修饰符来监听原生的`input`事件，同时使用`v-model`指令将输入框中的值与组件的`inputValue`属性绑定在一起。当输入框中的内容发生变化时，会触发原生的`input`事件并调用`handleInput`方法。 ### 回答2： 在Vue中，可以使用v-on指令来监听原生input的失焦事件。 首先，在组件或页面的template中，添加一个input元素，并为其指定一个唯一的ref属性，方便后续的操作。例如： ``` <input ref="myInput" @blur="handleBlur"> ``` 然后，在Vue实例中，定义一个方法来处理失焦事件。在该方法中，可以通过this.$refs来获取到之前指定的ref属性，并进行相应的处理逻辑。例如： ``` methods: { handleBlur() { const inputValue = this.$refs.myInput.value; // 获取输入框的值 // 执行其他业务逻辑... } } ``` 在上述的示例中，handleBlur方法会在input元素失去焦点时自动触发，并获取输入框的值。你可以根据具体需求在该方法中执行其他业务逻辑，例如，发送Ajax请求、更新数据等。 需要注意的是，@blur是Vue中的缩写语法，实际上等价于v-on:blur，用来绑定失焦事件。 希望以上回答能对你有所帮助，如果还有其他问题，请随时提问。 ### 回答3： 在Vue中，可以使用v-on指令来绑定原生input元素的失焦事件。具体的实现步骤如下： 1. 在模板中，创建一个input元素，并使用v-on指令绑定失焦事件： ```html <input v-on:blur="handleBlur" /> ``` 这里的`handleBlur`是在Vue实例中定义的一个方法，用于处理输入框失焦事件。 2. 在Vue实例中，定义handleBlur方法，用于处理输入框失焦事件： ```javascript methods: { handleBlur() { // 这里可以编写处理失焦事件的逻辑代码 } } ``` 在这个方法中，可以编写任何需要在输入框失焦时执行的逻辑代码。 通过以上的步骤，就可以在Vue中实现原生input元素的失焦事件的绑定。当输入框失焦时，会触发`handleBlur`方法中的逻辑代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值