Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

jQuery: Insert Paste Text

 

Wie kann man den Event von Einfügen und Paste in ein Eingabeelement abfangen?

 

Ich möchte beim Einfügen in ein Div-Eingabefeld oder TextArea Eingabefeld eine jquery Funktion ausführen?

 

Lösung:

Mit jquery.Element.bind(DOMNodeInserted) kann man das Ereignis auf jedes Element abfangen, welches eingefügt wird.

Allerdings wird der Event bei jedem einzelnen HTML Element ausgeführt. Beim Einfügen von großen HTML-Blöcken wird der Event mehrfach ausgeführt.

$("#divEditor").bind("DOMNodeInserted", function () { alert("Insert in divEditor"); })

 

Video unter:

https://www.youtube.com/watch?v=_jtgq-7k2fU&feature=youtu.be

 

jQuery script mit dazugehördendem HTML Element mit der passenden id=".."

<div contenteditable="true" id="divEditor" >123

..

<script>

    $("#divEditor").bind("DOMNodeInserted", function () { alert("Insert in divEditor"); })

</script>

 

Sobald ein Text eingefügt wird, wird das event .bind(..) durchlaufen.

 

 

@{

    Layout = null;

}

<div >

        <form asp-action="demo_jQuery_01">

            <div class="form-group">

 

                <br />

                TextArea<br />

                @*Html.TextAreaFor(model => model.Text1, new { @class = "form-control", @rows = 4 })*@

 

                <textarea class="form-control" id="Text1" name="Text1" style="height:100px;width:90%; overflow:auto;border:1px solid blue;">

                    @ViewData["Text1"]

                </textarea>

                <br />

                Div

                <div contenteditable="true" id="divEditor" name="divEditor" style="height:100px;width:90%;overflow:auto;border:1px solid red;">

                    @ViewData["Text2"]

                </div>

            </div>

 

        </form>

    </div>

 

 

<button id="btnInsert">Insert text</button>

<button id="btnTransfer">transfer text</button>

 

 

@*------------< jQuery-script >------------*@

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

 

 

    $("#btnInsert").click(Insert_Text);

    $("#btnTransfer").click(transfer_Text);

    $("#divEditor").bind("DOMNodeInserted", function () { alert("Insert in divEditor"); })

 

 

    function Insert_Text() {

        //var sText = $("#divEditor").html();

        //alert(sText);

        $("#divEditor").append("Insert_22");

    }

 

    function transfer_Text() {

        var sText = $("#divEditor").html();

        $("#Text1").val(sText);

    }

</script>

@*------------</ jQuery-script >------------*@

 

 

 

 

Asp core Controller

using System;

using Microsoft.AspNetCore.Mvc;

using IWois_Core.Data;

 

 

namespace IWois_Core.Controllers

{

    public class DemosController : Controller

    {

        private readonly ApplicationDbContext _dbContext;

 

        public DemosController(ApplicationDbContext context)

        {

            _dbContext = context;

        }

 

        public IActionResult demo_jQuery_01()

        {

            ///-------------< Index_All >-------------

            ViewData["Text1"] = "This is Text1 aaaa";

            ViewData["Text2"] = "This is Text2 bbbb";

            return View("demo_jQuery_01");

            ///-------------</ Index_All >-------------

        }

    }

}

 

 

 

Mobile
»
Upload with progress bar, Ajax
»
jQuery: Set the value of a progress display
»
Upload and view files with jQuery ajax, FileUpload, View the jsonResults
»
jQuery: 1-Button file upload with autostart
»
Asp jQuery: upload files with Ajax
»
jQuery: execute function before submit with send
»
Execute jQuery: function after loading a page
»
jQuery: insert HTML into an element
»
jQuery: Paste Event on Inserting Content into HTML Element
»
jQuery: Insert event When Text or HTML Inserted in Element

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de