Question

我目前正在实施一项功能，有人可以在我的页面上添加地址。他可以通过简单的形式做到这一点。我现在拥有的（打印地址）是：

@foreach($addresses as $address)
                        @if($address->typeOfAddress==0)
                            Name: {{$address->name}}<br/>
                            Straße: {{$address->street}}<br/>
                            PLZ: {{$address->plz}}<br/>
                            Ort: {{$address->city}}<br/>
                            <a type="button" class="btn btn-info" href="/editAddress/{{$address->id}}">Bearbeiten</a>
                            <a type="button" class="btn btn-danger deleteAddressButton" href="/deleteAddress/{{$address->id}}">Löschen</a>
                            <br/><br/>
                            @endif
                    @endforeach

变量addresses从控制器传递到视图中。

我现在想要实现的是，用户只需点击其中一个地址部分，如name，straße，plz和ort，然后将其转换为输入字段，即可更改该值。然后，当离开焦点时（所以点击其他地方（或者可能在其旁边添加一个保存按钮）），新数据必须通过ajax发送到控制器（请求本身应该没问题）。但是：我如何将其转换为输入字段，然后如何将其转换回来并对其作出反应（然后发送ajax请求）？

我在互联网上搜索，但没找到什么......

编辑：在这里发现了一个小提琴（http://jsfiddle.net/yXcZG/3）几乎可以做我想要的，但我有问题，它似乎没有保留格式，1。线条之间有更多的空间，并且：当点击它进行编辑时，输入字段会跳到页面底部并且不会保持在同一位置。另外，我只想让变量可编辑，而不是:之前的文本。所以这就是我的尝试:(当然，AJAX的东西仍然缺失，但首先是另一件事必须工作）

In JS:

 $(document).on('click', '.editableText', function (e) {
            console.log(this);
            TBox(this);
        });

        $("input").live('blur', function (e) {
            RBox(this);
        });
        function TBox(obj) {
            var id = $(obj).attr("id");
            var input = $('<input />', { 'type': 'text', 'id': id, 'class': 'editableText', 'value': $(obj).html() });
            $(obj).parent().append(input);
            $(obj).remove();
            input.focus();
        }
        function RBox(obj) {
            var id = $(obj).attr("id");
            var input = $('<p />', { 'id': id, 'class': 'editableText', 'html': $(obj).val() });
            $(obj).parent().append(input);
            $(obj).remove();
        }

HTML：

 @foreach($addresses as $address)
                        @if($address->typeOfAddress==0)
                            Name: <span id="addressName{{$address->id}}" class="editableText">{{$address->name}}</span><br/>
                            Straße: <span id="addressStreet{{$address->id}}" class="editableText">{{$address->street}}</span><br/>
                            PLZ: <span id="addressPLZ{{$address->id}}" class="editableText">{{$address->plz}}</span><br/>
                            Ort: <span id="addressCity{{$address->id}}" class="editableText">{{$address->city}}</span><br/>
                            <a type="button" class="btn btn-danger deleteAddressButton" href="/deleteAddress/{{$address->id}}">Löschen</a>
                            <br/><br/>
                            @endif
                    @endforeach

Edit2：在stackoverflow上也找到了这个答案（https://stackoverflow.com/a/6814092/3375021），所以使用contenteditable，但我有问题，我模糊不知道，哪个地址应该在数据库，也不是地址的哪一部分..

Answer 1

如果您正在寻找一个jQuery工作解决方案，您可以使用此

JsFiddle example

当您单击可编辑的元素时，您有一个侦听器，它将获取它的值并将其放入输入中。在你模糊之后，你可以使用这个值并随心所欲地做任何事情..

这是javascript（jQuery）部分。

$(function(){

  $('body').on("click", ".changeable", function(e){

    var text = $(this).text();

    $(this).html("<input type='text' class='input-editable' value='" + text + "'>");

    $(this).find('input').focus();
  });

  $('body').on("blur", ".input-editable", function(e){

    var text = $(this).val();

    $(this).parent().html(text);

   console.log("Value changes to: " + text);
  });

});

Answer 2

我认为你应该使用<?php echo $variable; ?>而不是刀片{{$variabl}}

如果要将html标签或js存储到数据库中，那么你需要不使用刀片来回应它，你应该使用php简单的echo函数来代替

将文本转换为可编辑的文本输入并保存到db - Laravel

2 个答案: