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

 

How can you intercept the paste and paste event in an input element?

 

I would like to execute a jquery function when inserting into a Div input field or TextArea input field?

 

Solution:

With jquery.Element.bind (DOMNodeInserted) you can catch the event on every element that is inserted.

However, the event will be executed on every single HTML element. When inserting large HTML blocks, the event will be executed multiple times.

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

 

Video at:

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

 

jQuery script with accompanying HTML element with the matching id = ".."

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

..

<script>

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

</script>

 

As soon as a text is inserted, the event .bind (..) run through.

 

 

@{

    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