Question

如何添加类似这样的保存按钮

<a class="btn btn-xs btn-default" href="#" ><i class="fa fa-check"></i></a>

提交内联文本编辑。

我想在输入框的右侧添加上方文本框，以便在单击它时将文本保存到跨度。

该图标是否也可能在鼠标悬停在.editableTextbox上可见？

$(function() {
    $(".editableTextbox").each(function() {
        var t = $(this);
        t.after("<input type = 'text' style = 'display:none' />");
        var i = $(this).next();
        i[0].name = this.id.replace("lbl", "txt"), i.val(t.html()), t.click(function() {
            $(this).hide(), $(this).next().show()
        }), i.focusout(function() {
            $(this).hide(), $(this).prev().html($(this).val()), $(this).prev().show()
        })
    })
});

.editableTextbox{padding: 2px; border:1px solid #CCC;}
.hiddencontrol{ 
	display: none;
}
.showcontrol:hover .hiddencontrol{
	display : block;
}
.editableTextbox:hover  {cursor: pointer;   background-color: #D9EDF8; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="editableTextbox"> Rename me </span>

Answer 1

您可以使用.append()方法将指定的内容作为每个元素的最后一个子项插入。

$(function() {
  $(".editableTextbox").each(function() {
    var t = $(this);
    t.after("<input type = 'text' style = 'display:none' />");
    var i = $(this).next();
    i[0].name = this.id.replace("lbl", "txt"), i.val(t.html()), t.click(function() {
      $(this).hide(), $(this).next().show()
    }), i.focusout(function() {
      $(this).hide(), $(this).prev().html($(this).val()), $(this).prev().show()
      $(".editableTextbox").append("<a class='btn btn-xs btn-default' href='#'><i class='fa fa-check'></i></a>");
    })
  })
});

.editableTextbox {
  padding: 2px;
  border: 1px solid #CCC;
}

.hiddencontrol {
  display: none;
}

.showcontrol:hover .hiddencontrol {
  display: block;
}

.editableTextbox:hover {
  cursor: pointer;
  background-color: #D9EDF8;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<span class="editableTextbox"> Rename me </span>

Answer 2

See this codes

$("#icon-cover").on("click", function(){
	/*Save ~~~*/
});

$("#icon-cover").mouseover(function(){
	$("#icon").css("display", "block");
}).mouseout(function(){
	$("#icon").css("display", "none");
});

.cover{
  width : 300px;
  position :relative;
}

#icon-input{
  width : 100%;
  height : 20px;
  padding-right : 20px;
  position : relative;
}
#icon-cover{
  text-align : center;
  width : 20px;
  height : 20px;
  position : absolute;
  top : 3px;
  right : -20px;
  background : rgba(255,255,255, 0.8);
  z-index : 5;
  cursor : pointer;
}
#icon{
  display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class = "cover">
  <input type = "text" id = "icon-input">
  <span id = "icon-cover">
  <span id = "icon">&#x2714;</span>
    <!--<i class = "fa fa-check">-->
  </span>
</div>

我希望这是您想要的。

我用unicode代替了fontawesome''

如何在嵌入式文本编辑占位符上显示“保存”图标按钮

2 个答案: