Question

我正在尝试在可以点击的文本框中插入图像。看看我到目前为止编写的代码。我确实创建了一个类并向其中插入了背景图像。

现在，我的问题是我应该如何点击它？

$(document).ready(function(){
  $('.icon').click(function(){
    $('.text-here').innerHTML = "Please enter your username";   
  });
});

.icon{
  background-image: url(http://directorzcut.com/modules/aqb/profile_mp3_player/templates/base/images/icons/popout.png);
  background-repeat: no-repeat;
  background-position: left;
  cursor: pointer;
}
.text-box{
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type = "text" class="icon text-box"/>
<p class="text-here"></p>

只有图标存在的区域应该是可点击的有简单的方法吗？

提前致谢：）

Answer 1

如果我理解正确，您可以使用item元素将img打包，并使用label指针指向输入。

当您点击for时，label将获得焦点。

我使用input禁用对pointer-events: none的关注，而不点击该元素。（input 不跨浏览器can I use）

另外，我修复了您的js（pointer-events而不是.html()）

＆＃13;

.innerHTML =

＆＃13;

$(document).ready(function(){
  $('.icon').click(function(){
    $('.text-here').html('Please enter your username');
  });
});

＆＃13;

.input-wrapper {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 5px;
  z-index: 1;
  height: 10px;
  margin-top: -5px;
}

.icon img {
  display: block;  
}

.text-box {
  padding-left: 20px;
  height: 30px;
  width: 250px;
  /*pointer-events: none;*/
}

＆＃13;

Answer 2

试试这个

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/ onclick="myFunction">
    <input style="border: none;"/>
</div>

希望这会奏效。

Answer 3

使用$('.text-here').html("Please enter your username");

＆＃13;

$(document).ready(function() {
  $('.icon').click(function() {
    $('.text-here').html("Please enter your username"); // Only change this line
  });
});

＆＃13;

.icon {
  height: 20px;
  width: 20px;
  margin-bottom: -5px;
}
.text-box {
  padding-left: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="text-box" />
<img class="icon img-seach" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png">
<p class="text-here"></p>

＆＃13;

Answer 4

试试这个

<强> HTML

<div class="header-search">
                            <input  type="text">
                            <a href="javascript:;" id="link" >
                                <img class="img-seach" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png">
                            </a>
                        </div>

<强> CSS

input {
    border: 1px solid #d1d1d1;
    width: 86%;
    padding: 3px !important;
    box-sizing: initial;
}
.img-seach {
    position: absolute;
    right: 18px;
    top: 6px;
    height:14px;
    width:14px;
}
.header-search {
    width: 155px;
    float: right;
    position: relative;
}

<强>脚本

$('#link').click(function(){
    alert("clicked");
  })

Working fiddle

Answer 5

背景图片不是元素，因此不可点击。您应该将图标作为单独的元素，并为其分配click处理程序。

新创建的图标元素应该是input的兄弟元素，并且在为input元素提供正确的padding-left值后，使用css将其定位在其上。

查看此演示：

$('#container .icon').on('click', function(){
  console.log('BOOYAAAA');
});

#container {position:relative;}
input {padding-left: 20px;}
.icon {
  display:block;
  position:absolute;
  top:4px;
  left:4px;
  width:13px;
  height:13px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <span class="icon"></span>
  <input type="text" />
</div>

Answer 6

根据我的理解，正确的方法是使用@GET @Path("/getAttachmentsList") @Produces(MediaType.APPLICATION_ATOM_XML) public Response getAttachmentList(){ ArrayList<File> list=new ArrayList<File>(); for(int i=1;i<=6;i++){ File file = new File("C:/Users/name/Sample_"+i+".pdf"); list.add(file); } GenericEntity<ArrayList<File>> genericList=new GenericEntity<ArrayList<File>>(list){}; return Response.ok(genericList).build(); }标记后跟<img>并将其包装在<input>中。然后，您将不得不使用css更新外观，使其看起来好像图像在文本框中

<div>

$(document).ready(function() {
  $('.icon').click(function() {
    $('.text-here').text("Please enter your username");
  });
});

.my-textbox{
  border: 1px solid black;
  padding: 2px;
  display: inline-block;
}

.icon {
  cursor: pointer;
  margin-left: 4px;
}
.text-box {
  border: none;
  padding-left: 2px;
}

Answer 7

试试这个！

右键单击该图标，然后在新选项卡中将其打开。

＆＃13;

$(document).ready(function(){
  $('.icon').click(function(){
    $('.text-here').innerHTML = "Please enter your username";   
  });
});

＆＃13;

.icon{
  display:inline-block;
  background-image: url(http://directorzcut.com/modules/aqb/profile_mp3_player/templates/base/images/icons/popout.png);
  background-repeat: no-repeat;
  background-position: left;
  position:absolute;
  width: 20px;
  height: 20px;
  top: -1px;
  left: 7px;
  z-index: 1;
  cursor: pointer;
  color:blue;
}
.text-box{
  padding-left: 20px;
  position:relative;
}

.group{
position:relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
<input type = "text" class=" text-box"/>
<a href="http://www.stackoverflow.com" class="icon" target="_blank"></a>
<p class="text-here"></p>
  </div>

＆＃13;

文本框内的可点击图标

7 个答案: