Asked  7 Months ago    Answers:  5   Viewed   20 times

I'm looking for a way to sanitize input that I paste into the browser, is this possible to do with jQuery?

I've managed to come up with this so far:

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

Unfortunately my development has come to a screeching hold because of this "minor" issue. I would really make me a happy camper if someone could point me to the right direction.

 Answers

85

I sort of fixed it by using the following code:

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

Now I just need to store the caret location and append to that position then I'm all set... I think :)

Tuesday, June 1, 2021
 
Guesser
answered 7 Months ago
64

use filter_var()

http://php.net/manual/en/function.filter-var.php

like if you want to sanitize an email:

$_POST['email'] =    filter_var($_POST['email'], FILTER_SANITIZE_EMAIL); 

to message

$_POST['message'] = filter_var($_POST['message'], FILTER_SANITIZE_STRING);

is enogth

Saturday, May 29, 2021
 
commonpike
answered 7 Months ago
75

Because the paste event is triggered before the inputs value is updated, the solution is to either:

  1. Capture the data from the clipboard instead, as the clipboards data will surely be the same as the data being pasted into the input at that exact moment.

  2. Wait until the value has updated using a timer

Luckily, years after the original answer was posted, most modern browsers now support the fantastic Clipboard API, a much more elegant solution to capturing data from the clipboard.

For browsers that don't support the Clipboard API, we could fall back to the unreliable event.clipboardData if we do some checking as to which version, if any, is supported in the browser.

As a final fallback, using a timer to delay until the inputs value is updated, will work in all browsers, making this a truly cross-browser solution.

I've made a convenient function that handles everything

function catchPaste(evt, elem, callback) {
  if (navigator.clipboard && navigator.clipboard.readText) {
    // modern approach with Clipboard API
    navigator.clipboard.readText().then(callback);
  } else if (evt.originalEvent && evt.originalEvent.clipboardData) {
    // OriginalEvent is a property from jQuery, normalizing the event object
    callback(evt.originalEvent.clipboardData.getData('text'));
  } else if (evt.clipboardData) {
    // used in some browsers for clipboardData
    callback(evt.clipboardData.getData('text/plain'));
  } else if (window.clipboardData) {
    // Older clipboardData version for Internet Explorer only
    callback(window.clipboardData.getData('Text'));
  } else {
    // Last resort fallback, using a timer
    setTimeout(function() {
      callback(elem.value)
    }, 100);
  }
}

// to be used as 

$('#myid').on('paste', function(evt) {
  catchPaste(evt, this, function(clipData) {
    console.log(clipData);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myid" />

Note that getting the data from the clipboard only gets you the pasted text, while waiting for the inputs value to update is the only solution above that actually gets the entire value of the input, including the newly pasted text.

Wednesday, July 28, 2021
 
zhartaunik
answered 5 Months ago
92

This might give you a nice starting point: Fiddle

Add a step class to each of your form elements (I do believe for this to work they need to be each other's siblings):

<form class="step-by-step">
    <!-- Start with only the first one enabled -->
    <input type="text" class="step" id="step1" />
    <input type="text" class="step" id="step2" disabled />
    <input type="text" class="step" id="step3" disabled />
    <!-- Also works with selects,
         as long as you keep track of IDs -->
    <select id="step4" class="step" disabled>
        <option value="">Choose one</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <select id="step5" class="step" disabled>
        <option value="">Choose one</option>
        <option value="europe">Europe</option>
        <option value="america">America</option>
    </select>
</form>

Then, use the next() function to find the next step in the form when something changes, and either disable or enable it (or all next steps, if the element was empty):

// The change event is fired when a form element loses focus
// and its value has changed since the last time we interacted with it
$('.step').change(function() {
    var next_step = $(this).next('.step');
    var all_next_steps = $(this).nextAll('.step');
    // If the element *has* a value
    if ($(this).val()) {
        // Should also perform validation here
        next_step.attr('disabled', false);
    }
    // If the element doesn't have a value
    else {
        // Clear the value of all next steps and disable
        all_next_steps.val('');
        all_next_steps.attr('disabled', true);
    }
});

For TAB functionality, the following is a quick fix, which I'm sure can be somehow integrated with the above function.

$('.step').keydown(function(event) {
    // If they pressed tab AND the input has a (valid) value
    if ($(this).val() && event.keyCode == 9) {
        $(this).next('.step').attr('disabled', false);
    }
});
Sunday, August 15, 2021
 
madphp
answered 4 Months ago
34

You'll need to use "id" and a little JavaScript. For example:

<input type="text" name="amount" id="amount">
<button onclick="alert('amount is: ' + document.getElementById('amount').value)">Show</button>
Wednesday, December 1, 2021
 
tsmbl
answered 5 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share