文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >input[text]中的Clear按钮

问input[text]中的Clear按钮
EN

Stack Overflow用户
提问于 2017-03-21 20:44:08
回答 4查看 2.2K关注 0票数 0

//我的英语可能有很大的问题，但我希望你能理解。

一般来说，我尝试使用Marco的代码，但我在使用图标而不是按钮中的文本时遇到了一个很大的问题。我屏蔽了它，给它一个透明的背景，删除了轮廓和边框。这对我没什么帮助。我是这样解决的：

​

代码语言：javascript
复制
$(".clearbutton").click(function(){
  $(".clearable").val("");
});
代码语言：javascript
复制
::-webkit-input-placeholder {
    text-align: center;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

:-moz-placeholder { /* Firefox 18- */
    text-align: center;  
    text-shadow: none;
    -webkit-text-fill-color: initial
}

::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
    text-shadow: none;
    -webkit-text-fill-color: initial
}

:-ms-input-placeholder {  
    text-align: center; 
    text-shadow: none;
    -webkit-text-fill-color: initial
}

input[type="text"] {
    background-image: linear-gradient(#FAFAFA, #F1F1F1);
    border-radius: 4px;
    border-width: 0.5px;
    border-color: #ABABAB;
    padding: 3px 6px;
    outline: none;
    border-style: solid;
    color: #ABABAB;
    text-shadow: 0px 0px 0px #000000;
    -webkit-text-fill-color: transparent;
}

input[type="text"]::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]::-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus::-moz-placeholder          {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-moz-placeholder           {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-ms-input-placeholder      {text-indent: -500px; transition: text-indent 0.3s ease;}

.uitextbox {
  display: table;
}

.clearbutton {
    outline: none;
    border: none;
    background: none;
    position: absolute;
    margin-right: 25px;
    margin-top: 2.5px;
}
代码语言：javascript
复制
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="uitextbox">
            <input class="clearable" type="text" placeholder="Search"/>
            <button class="clearbutton"><img src="icon.svg" width="15" height="15"></button>
        </div>
    </body>
</html>

​

UPD:哇，这起作用了。好的，但我的第一个问题是按钮的位置。她不在盒子里。我的第二个问题是，当box值为空时，哪个按钮是可见的。然而，我认为，我可以解决它。我的第三个问题是装饰。我知道如何获得元素淡入淡出效果。但是，我不知道如何在按钮和框的文本上做到这一点。我的手是从错误的地方长出来的。由于某些原因，我不能使用外部js文件，当我在html文件中使用脚本时，它就可以工作了。我的工作区可能有问题吗？_。-。

This is how looks my code

.js文件它在"js“文件夹中，是的

当我使用外部js文件时，它不工作。所以我不能关注图片，只是因为我没有太多的名气。

当我在html中使用js时，it works。

javascript
html
css
EN

回答 4

Stack Overflow用户

发布于 2017-03-21 20:50:08

重置按钮和输入需要在表单中。请注意，重置按钮将重置整个表单。

​

代码语言：javascript
复制
<form>
  <input type="text" />
  <button type="reset" value="reset">reset</button>
</form>

​

票数 0
EN

Stack Overflow用户

发布于 2017-03-21 20:51:05

如果我是对的，您希望按钮位于输入字段内。

这样：

​

代码语言：javascript
复制
$("button").click(function(){
  $(".clearable").val("");
});
代码语言：javascript
复制
@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
   font-family: 'Roboto', sans-serif;
}

::-webkit-input-placeholder {
    text-align: center;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

:-moz-placeholder { /* Firefox 18- */
    text-align: center;  
    text-shadow: none;
    -webkit-text-fill-color: initial
}

::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
    text-shadow: none;
    -webkit-text-fill-color: initial
}

:-ms-input-placeholder {  
    text-align: center; 
    text-shadow: none;
    -webkit-text-fill-color: initial
}

input[type="text"] {
    background-image: linear-gradient(#FAFAFA, #F1F1F1);
    border-radius: 4px;
    border-width: 0.5px;
    border-color: #ABABAB;
    padding: 3px 6px;
    outline: none;
    border-style: solid;
    color: #ABABAB;
    text-shadow: 0px 0px 0px #000000;
    -webkit-text-fill-color: transparent;
}

input[type="text"]::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]::-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus::-moz-placeholder          {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-moz-placeholder           {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-ms-input-placeholder      {text-indent: -500px; transition: text-indent 0.3s ease;}

div {
  display: table;
}
button {
    position: absolute;
    margin-left: -62px;
    margin-top: 1px;
}
代码语言：javascript
复制
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
    <div>
        <input class="clearable" type="text" placeholder="JUST TEXT BOX"/>
        <button>CLEAR</button>
        </div>
    </body>
</html>

​

票数 0
EN

Stack Overflow用户

发布于 2017-03-21 20:52:35

如果您不能按照VilleKoo的建议将其放入表单，还可以添加一个按钮来清除该值，如下所示，以清除找到的第一个类型为text的输入。

​

代码语言：javascript
复制
@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
   font-family: 'Roboto', sans-serif;
}

::-webkit-input-placeholder {
    text-align: center;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

:-moz-placeholder { /* Firefox 18- */
    text-align: center;  
    text-shadow: none;
    -webkit-text-fill-color: initial
}

::-moz-placeholder {  /* Firefox 19+ */
    text-align: center;  
    text-shadow: none;
    -webkit-text-fill-color: initial
}

:-ms-input-placeholder {  
    text-align: center; 
    text-shadow: none;
    -webkit-text-fill-color: initial
}

input[type="text"] {
    background-image: linear-gradient(#FAFAFA, #F1F1F1);
    border-radius: 4px;
    border-width: 0.5px;
    border-color: #ABABAB;
    padding: 3px 6px;
    outline: none;
    border-style: solid;
    color: #ABABAB;
    text-shadow: 0px 0px 0px #000000;
    -webkit-text-fill-color: transparent;
}

input[type="text"]::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]::-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus::-moz-placeholder          {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-moz-placeholder           {text-indent: -500px; transition: text-indent 0.3s ease;}
input[type="text"]:focus:-ms-input-placeholder      {text-indent: -500px; transition: text-indent 0.3s ease;}
代码语言：javascript
复制
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <input id="asdf" class="clearable" type="text" placeholder="JUST TEXT BOX"/>
        <button value="clear" onclick='document.querySelectorAll("input[type=text]")[0].value=""'>Clear</button>
    </body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42927511

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档