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

我目前正在实现一个功能，有人可以在我的页面上添加地址。他可以通过一个简单的表格来做这件事。我现在拥有的（打印地址）是：

HTML:

@foreach（$address作为$address）
@如果（$address->typeOfAddress==0）
名称：{{$address->Name}}

街：{{$address->street}}

PLZ:{{$address->PLZ}}

Ort:{{$address->city}}




@恩迪夫
@endforeach

---

Edit2:在stackoverflow（）上也找到了这个答案，所以使用contenteditable，但我有一个问题，我不知道应该在数据库中更改哪个地址，也不知道地址的哪一部分。

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

您有一个侦听器，当您单击可编辑的元素时，它将获取该元素的值并将其放入输入中。 模糊后，您可以获取该值并使用它执行任何操作

下面是javascript（jQuery）部分

$（函数（）{
$（'body'）。在功能（e）上（“单击”，“可更改”）{
var text=$（this.text（）；
$（this.html（“”）；
$（this.find（'input'）.focus（）；
});
$（'body'）。打开（“模糊”，“输入可编辑”，函数（e）{
var text=$（this.val（）；
$（this.parent（）.html（文本）；
log（“值更改为：”+文本）；
});
});

我认为你应该使用

而不是blade

{{$variabl}

---

如果要将html标记或js存储到数据库中，则不需要使用blade进行回送，而应该使用php simple echo函数

为什么不将数据加载到表单中，然后使用更新按钮？实现资源丰富的路由。@DenisPriebe不希望在一个页面上有那么多表单，因为一个页面上有很多地址。。。所以我只想在用户按下一个按钮创建一个新地址时显示一个表单，但是如果他想编辑一个地址，他应该只按地址的一部分，它应该转换成一个输入，然后在离开焦点时保存…它似乎没有保持格式你说的格式是什么意思？@JoseRojas正是我在它之后写的两点，行与行之间有更多的空间，输入跳转到页面底部请更新你的问题到目前为止你做了什么，这可能是一个问题style@nameless有了这个函数，您就有了关于模糊事件的文本，您可以在此函数中执行任何ajax调用来修改数据库。这就是你要找的，对吗？是的，你是对的，这正是我想要的。它比其他两种解决方案更好，但有一个问题：点击文本2次，第一次将其转换为输入，第二次点击只是为了好玩/基本上是因为你经常点击它以确保光标在那里闪烁，或者只是为了编辑文本最末端或开头的内容，这是一个问题（多长的一句话）：我第二次点击时，文本就消失了……我该怎么解决呢？@无名我已经更新了，如果我的答案对你有效，请标记我的答案，祝你好运：）

@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

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();
        }

 @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

$(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);
  });

});