Is it possible to read the clipboard in Firefox, Safari and Chrome using JavaScript?

Question

I have a form with 2 nested forms for a Professional (certificates and trainings). Each one has the association accepts_nested_attributes_for in the Professional model. I can create a new professional with his certificates and training. When I save, however, instead of updating the certificates and trainings a new one is created.

My Professional controller:

def edit
  @professional = Professional.find(params[:id])
  @component = Component.all
  cert = Certificate.where('professional_id = ?', params[:id])
  cert.each do |certificate|
    @certificate = certificate
  end
  tra = Training.where('professional_id = ?', params[:id])
  tra.each do |training|
    @training = training
  end
  @work = Work.all
  @charge = Charge.all
  @entities =Array.new
  TypeEntity.where("id IN (1,5)").each do |tent|
    @entities << tent.entities
  end
  @reg = Time.now.to_i.to_s
  @major = Major.all
  @action = 'edit'
  render layout: false
end

def update
  profesional = Professional.find(params[:id])
  if profesional.update_attributes(professional_parameters)
    flash[:notice] = "Se ha actualizado correctamente los datos."
    redirect_to :action => :index
  else
    profesional.errors.messages.each do |attribute, error|
      flash[:error] =  flash[:error].to_s + error.to_s + "  "
    end
    # Load new()
    @profesional = profesional
    render :edit, layout: false
  end
end

private
def professional_parameters
  params.require(:professional).permit(
    :name,
    :dni, 
    :professional_title_date, 
    {:major_ids => []}, 
    :date_of_tuition, 
    :code_tuition, 
    :professional_title, 
    :tuition, 
    :cv, 
    certificates_attributes: [
      :id, 
      :professional_id, 
      :work_id, 
      :charge_id, 
      :entity_id, 
      :num_days, 
      :start_date, 
      :finish_date, 
      {:component_work_ids => []}, 
      :certificate, 
      :other, 
      :_destroy
    ], 
    trainings_attributes: [
      :id, 
      :professional_id, 
      :type_training, 
      :name_training,
      :num_hours, 
      :start_training, 
      :finish_training, 
      :training, 
      :_destroy
    ]
  )
end

This are the models:

class Certificate < ActiveRecord::Base
  has_one :charge
  belongs_to :professional
end

class Professional < ActiveRecord::Base
  has_and_belongs_to_many :majors
  has_many :certificates
  has_many :trainings
  accepts_nested_attributes_for :certificates, :allow_destroy => true
  accepts_nested_attributes_for :trainings, :allow_destroy => true
end

class Training < ActiveRecord::Base
  belongs_to :professional
end

The form begins with this:

=simple_form_for([:biddings, @professional], html: { multipart: true }) do |f|

after that I have the 3 forms in a bootstrap wizard.

Solution 1

Safari supports reading the clipboard during onpaste events:

Information

You want to do something like:

someDomNode.onpaste = function(e) {
    var paste = e.clipboardData && e.clipboardData.getData ?
        e.clipboardData.getData('text/plain') :                // Standard
        window.clipboardData && window.clipboardData.getData ?
        window.clipboardData.getData('Text') :                 // MS
        false;
    if(paste) {
        // ...
    }
};

Solution 2

Online Spreadsheets hook Ctrl+C, Ctrl+V events and transfer focus to a hidden TextArea control and either set it contents to desired new clipboard contents for copy or read its contents after the event had finished for paste.

Solution 3

NO. And if you do find a hack (e.g. old version of flash) do not depend on it.

Can I ask why you want to read from the clipboard? If the user wants to pass along the clipboard contents, all they need to do is paste.

Solution 4

I believe people use a hidden Flash element to read the clipboard data from the browsers you mentioned.

Solution 5

Using @agsamek suggestion I created a little test snipped and got it to work. In my case I need to wait after a fresh pageload for pasted input, so I focus on an out-of-view textarea and read the text from there.

You could extend this to listen to specific keys (paste combination) and then focus on the hidden field. There would definitely more work to be done as I think you need to re-focus then on the last focused element and paste content there.

For my use-case though this was enough to make it work in latest Chrome and Firefox. Suggestions welcome.

https://jsfiddle.net/wuestkamp/91dxjv7s/11/

$(function () {

    $('body').prepend('<input type="text" id="hidden_textbox" style="position: absolute; width:0px; height: 0px; top: -100px; left: -100px">');

    var $hiddenTextbox = $('#hidden_textbox');
    $hiddenTextbox.focus();

    $(document).on('paste', function () {
        setTimeout(function () {
            var val = $hiddenTextbox.val();

            console.log('pasted: ' + val);

        }, 50);

    });

});

View more solutions

Comments

[Bharath Mg]

Where is your Professional Model? Pls paste it

[Kirti Thorat]

Please share the edit view code in the question.

[Kirti Thorat]

Can you share the code for entire edit view along with the nested form details(if they are in separate partial). If you think that your question is getting lengthy then you may want to add the code in Github Gist.

[Sean]

Did you figure this out? Im having the exact same issue, and its driving me nuts. After the form submits, it returns validation error, and creates a duplicate set of child records each time i do it.

[Brian Ngeywo]

am having the same problem, any solutions?

[Kirti Thorat]

Where do you see one-to-one association? Its one-to-many association look at the model Professional .