Grow your CSS skills. Land your dream job.

Last updated on:

Keep Text Inputs in Sync

var $inputs = $(".example-input");
$inputs.keyup(function() {
      $inputs.val($(this).val());
});

Example



Comments

  1. There seems to be some user unfriendly differences between firefox and chrome (that is that I have noticed)

    in firefox it works fine I think
    but in chrome your marker thing (that blinking line that tells you where in the field you are typing)
    will jump to the end of the field every time you release the key on your keyboard

    this makes it a pain in the ass to edit more than one character thats typed early in the field

  2. Roman Gavrilov
    Permalink to comment#

    doesn’t work when text is pasted using mouse (right click, paste)
    doesn’t work if value is pasted with javascript

    • Permalink to comment#

      For folks using jquery 1.7+

      $inputs.on( "paste keyup", function() { 
           $inputs.val( $( this ).val() );
      });
      
  3. adarsh
    Permalink to comment#

    not working in ie

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".