Question

我们有一个需要单页面应用程序的项目。目前我有这个HTML / carousel页面来创建问题。如您所见，根本没有输入。这必须通过javascript实现。如果您看到每个H，onclick事件，则必须在点击代码时将其转换为输入代码。

有任何帮助吗？我以为我已经找到了出路，但它不起作用

HTML：

  <div>
      <div ng-controller="CarouselDemoCtrl">
          <div style="height:10px;">
              <carousel interval="myInterval">
                  <slide ng-repeat="slide in slides" active="slide.active" >
                  <div class="CreateSlideCss">
                    <h1>
                        <div class="CreationTitel">
                            Click om uw titel op te geven
                        </div>
                    </h1>
                    <h2>
                        <div class="CreationVraag"> 
                            Click om uw vraag in te voeren .
                        </div>
                    </h2>
                    <button class="CreationVraagBtn" >click voor uw type vraag te selecteren</button>
                    <h3>
                        <textarea class="CreationAntwoordTxt" >hier is de content van uw antwoorden</textarea>
                    </h3>
                          <div class="carousel-caption">
                              <h4>Slide {{$index}}</h4>
                          </div>
                      </div>
                  </slide>
              </carousel>
          </div>
          <div class="row" >
              <div class="col-md-6">
                  <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
              </div>
          </div>
      </div>
  </div>

jQuery的：

$( "button.CreationVraagBtn" ).click(function() {
    $( "div.CreationTitel" ).replaceWith( "<input value='" + "hallo" + "'></input>" );
});

Answer 1

您可以将点击更新为：

$('h1, h2, h3, h4, h5, h6').on('click', function(){
    $(this).html('<input type="text" />');
});

以及更多角度方式，您可以在directive：

中使用此方法

.directive('carousel', function() {
    return {
       restrict: 'E',
       templateUrl: function(elem, attr){
          angular.element(elem).find('h1, h2, h3, h4, h5, h6').on('click', function(){
              $(this).html('<input type="text" />');
          });
       }
    };
});

根据文档：

如果jQuery可用，angular.element是jQuery函数的别名。如果jQuery不可用，angular.element会委托给Angular的内置jQuery子集，称为＆＃34; jQuery lite＆＃34;或＆＃34; jqLite。＆＃34;。

jqLite是一个微小的API兼容的jQuery子集，它允许Angular以跨浏览器兼容的方式操作DOM。 jqLite仅实现最常用的功能，目标是占用空间非常小。

_{jqLite is already implemented in angular which has the most commonly used methods. if you load jQuery before angular then you will make use of fully functional jQuery methods.}

Answer 2

只需在封闭元素中添加id，删除当前内容，然后使用DOM API插入新节点。

例如，你给它标识myId，然后你可以这样做：

var node = document.querySelector('#myId');
while (node.firstChild) {
    node.removeChild(node.firstChild);
}
var newNode = document.createElement('input');
// set up attributes
newNode.setAttribute('type', 'text');
newNode.setAttribute('value', 'hallo');
node.appendChild(newNode);

或者以jQuery的方式：

$('#myId').empty();
$('#myId').append($('<input type="text" value="hallo"/>'));

Answer 3

一个非常简单的选择是使用占位符为输入设置样式，以便像普通文本一样显示，只要它没有焦点：

input{
  border:none;
  color:black;
}

input:focus{
  border: 1px solid black;  
}

<input type="text" placeholder="Click om uw titel op te geven"/>

如果您愿意，也可以style the placeholder text。

我看到你正在使用AngularJS，这使得这更容易：

切换：

<div class="CreationTitel">
    <span ng-click="showTitleInput = !showTitleInput">Click om uw titel op te geven</span>
    <input type="text" ng-show="showTitleInput"/>
</div>

或只是一个“show”元素/按钮消失：

<div class="CreationTitel">
    <span ng-click="showTitleInput = true" ng-hide="showTitleInput">Click om uw titel op te geven</span>
    <input type="text" ng-show="showTitleInput"/>
</div>

Answer 4

$('h1, h2, h3, h4, h5').click(function() {
       $(this).replaceWith('<input>'+ this.innerHTML + '</input>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>text 1</hi>
  <h2>text 2</h2>
  <h1>text 3</h1>
</div>

Answer 5

我认为H标签应足够智能以呈现输入。您可以放置类似＆＃34; renderinput＆＃34;然后添加数据属性，如

<h1 class="renderinput" data-pickdata=".CreationTitel" data-placeusing="text"></h1>

和js代码看起来像：

      $(function () {
        $('.renderinput').on('click',function(){
          var $this = $(this);
        var input = $('<input></input>').attr({
        'type' : 'text'
          })
        .val($($this.data('pickdata'))[$this.data('placeusing')]());
        $this.replaceWith(input);
        });
});

这将确保您只使用html而不是触摸js，以防需要另一个H标签。

Answer 6

脚本代码必须放在CarouselTag中才能使其正常工作。

或许专家可以对此做出明确的解释。虽然对于想要采用相同方法的人来说这是一个解决方案

如何使用javascript更改标签

6 个答案: