CODEWITHSUNDEEP
javascript
Martin Smellworse
Martin Smellworse

Reputation: 1752

find length of pasted text in text field with MaxLength set

I need to check the length of the text in a text box that has MaxLength set to 10. If someone pastes more than 10 characters the pasted text is trimmed to 10 characters. How can I detect if the pasted text was longer than 10 characters and let the user know 'your text has been trimmed'?

Also, if when someone pastes I put up an alert box, it triggers the onblur event, which occurs first. How can I prevent this?

<input type="text" id="txt" maxlength="10" onblur="checklength(event);" onpaste="pasted(this)">

function checklength(e)
{
alert('blurry ' + document.getElementById('txt').value.length);
e.cancelBubble=true;
}

function pasted(element) {
setTimeout(function(){
    alert(element.value.length);
}, 0);
}

Beginning of a fiddle at enter link description here

Upvotes: 1

Views: 3430

Answers (4)

David T&#252;rkiye
David T&#252;rkiye

Reputation: 71

This is an old topic. But I'll post my own solution to help other peoples like me.

This solution using onpaste

function validateCopyPaste(event, inputContent) {
    var data = event.clipboardData.getData("text/plain");
    var selectInput = $("input[name='"+inputContent+"']");
    var inputLenght = selectInput.val().length;
    var pastedLenght= data.length;

    var isNullOrNoText = (!data || data.length === 0);
    if (isNullOrNoText) {
        event.preventDefault();
    }

    if (inputContent == "nickname") {
        // this will check if the length of the pasted content is greater than 16
        if (pastedLenght > 16) {
            event.preventDefault();
        }
        // this will check if the sum of pasted content length and input content length is greater than 16
        if (pastedLenght + inputLenght > 16) {
            event.preventDefault();
        }
        
    }
}

and here is the input code

<input type="text" name="nickname" class="form-control form-control-sm"  onpaste="validateCopyPaste(event, 'nickname')">

Upvotes: 1

Himanshu
Himanshu

Reputation: 517

can also use something like this binded with onchange event of javascript 

<input type="text" onchange="handleLength(this)"/>

function handleLength(ele){     
            if(ele.value.length>10){
            ele.value= ele.value.substring(0,10);
            alert("your text has been trimmed");        
            }
        }

Upvotes: 1

vikrant singh
vikrant singh

Reputation: 2111

Use onpaste event in javascript

var myElement = document.getElementById('input');

myElement.onpaste = function (e) {
    if (this.value.length > 255) {
        alert("text trimmed");
    } 
    this.value = this.value.substring(0, 255); //
}

DEMO

Upvotes: 1

Hiten Naresh Vasnani
Hiten Naresh Vasnani

Reputation: 538

Take a look at the onpaste event in javascript, you can get the clipboard text in the function you assign to the onpaste event, and process it accordingly.

To get clipboard text in the onpaste function, you can use

window.clipboardData.getData('Text')

and if the length is greater than 255 it means it has been trimmed and you can display your message to the user.

Maybe this link can help too.

JavaScript get clipboard data on paste event (Cross browser)

Upvotes: 3

Related Questions