Question

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

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

$(".clearbutton").click(function(){
  $(".clearable").val("");
});

::-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;
}

<!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：哇，这很有用。好的，但我的第一个问题是它的按钮位置。她不在盒子里。我的第二个问题是当盒值为空时，哪个按钮可见。但是，我想，我可以解决它。我的第三个问题是它的装饰。我知道如何获得元素褪色效果。但是，我不知道，如何在按钮和框的文本上这样做。我的手在错误的地方长大。出于某种原因，我无法使用外部js文件，当我在html文件中使用脚本时，它正在工作。我的工作区可能有些问题吗？ ._.-。

This is how looks my code

.js文件它位于“js”文件夹中，是的

当我使用外部js文件时，它不起作用。所以我不能跟随图片，因为我没有那么多的声誉。

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

Answer 1

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

<form>
  <input type="text" />
  <button type="reset" value="reset">reset</button>
</form>

Answer 2

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

这样：

$("button").click(function(){
  $(".clearable").val("");
});

@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;
}

<!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>

Answer 3

如果你不能按照VilleKoo的建议把它放在一个表格中，你也可以添加一个按钮来清除下面的值，以清除找到的第一个类型文字输入。

@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;}

<!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>

Answer 4

const MarketplaceGrid = ({ classes }) => {
  //select an array of marketplaces
  const marketplaceData = useSelector(
    (state) => state.marketplace.marketplaceData
  );

  return (
    <div className={classes.content}>
      <div className={classes.toolbar} />
      <GridContainer>
        {marketplaceData.map((marketplace, i) => (
          <GridItem xs={1} sm={2} md={3} key={i}>
            <MarketplaceCard
              classes={classes}
              {...marketplace} //pass down all properties of marketplace as props
            />
          </GridItem>
        ))}
      </GridContainer>
    </div>
  );
};

const MarketplaceCard = ({ img, classes, author, alg_name, alg_description, alg_type}) => {
  // you need an image from somewhere
  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt="Model Image"
          height="200"
          image={img}
          title="Model Image"
        />
        <CardContent>
          <p className={classes.cardCategory}>Author: {author}</p>
          <p className={classes.cardCategory}>Animals: {alg_type}</p>
          <p className={classes.cardCategory}>Data:</p>
          <p>{alg_description}</p>
        </CardContent>
        <CardActions>
          <Button size="small" color="primary">
            Demo Model
          </Button>
          <Button size="small" color="primary">
            Download Model
          </Button>
        </CardActions>
      </CardActionArea>
    </Card>
  );
};

就像上面的代码一样，您可以自己编写一个清除按钮，然后将该按钮与输入框组合在一起

输入中的清除按钮[文本]

4 个答案: