JS实现输入框轮播placeholder并提交其内容或用户的输入

#define bug

已于 2022-08-21 02:01:54 修改

阅读量1k

点赞数 1

文章标签： javascript html 前端

于 2022-08-21 01:55:02 首次发布

本文链接：https://blog.csdn.net/includebug/article/details/126446439

版权

效果

实现搜索框中placeholder的定时滚动轮播，并按用户操作实现提交其中的内容或提交用户输入的内容。

效果图

原理

本文做法是通过JS设置并改变placeholder，通过监听HTML的<input>标签来实现提交输入框内容。

注意

要同时分别监听用户的两种操作，即输入框中的回车与旁边的按钮。两个<input>标签不能用<form>表单包裹且按钮的type不能为submit，否则可能造成提交的冲突导致JS的提交操作无效。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input id="src" type="text" name="search">
        <input type="button" id="btn" value="提交">
    </div>

    <script>
        var a=document.getElementById("src");
        var btn=document.getElementById("btn");
        var str=['A','B','C'];//轮播的内容
        var i=0;
        function change(){//轮播
            if(i+1>str.length)
                i=0;
            a.setAttribute('placeholder',str[i++]);    
        }
        setInterval(change,1500);//定时轮播
        function submit(){//提交
            if(a.value=='')
                alert("提交轮播内容："+a.getAttribute('placeholder'));
                //location.href='/index.php?a=search&search='+a.getAttribute('placeholder')+'';
            else
                alert("提交用户输入的内容："+a.value);
                //location.href='/index.php?a=search&search='+a.value+'';
        }
        btn.onclick=function(){submit();} //监听按钮
        a.onkeydown=function(key){//监听输入框内的回车
            if(key.keyCode==13)
                submit();
        }
    </script>  
</body>
</html>

#define bug

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS实现输入框轮播placeholder并提交其内容或用户的输入

JS实现输入框轮播placeholder并提交其内容或用户的输入，实现搜索框中placeholder的定时滚动轮播，并按用户操作实现提交其中的内容或提交用户输入的内容。
复制链接

扫一扫

JS实现输入框轮播placeholder并提交其内容或用户的输入

效果

实现搜索框中placeholder的定时滚动轮播，并按用户操作实现提交其中的内容或提交用户输入的内容。

效果图

原理

本文做法是通过JS设置并改变placeholder，通过监听HTML的<input>标签来实现提交输入框内容。

注意

要同时分别监听用户的两种操作，即输入框中的回车与旁边的按钮。两个<input>标签不能用<form>表单包裹且按钮的type不能为submit，否则可能造成提交的冲突导致JS的提交操作无效。

代码

“相关推荐”对你有帮助么？