0

The Twitter input box is much more than your average INPUT or textarea. First off, it isn't an input or textarea at all. They are instead using a well crafted DIV with a "role" attribute. for the entire text; likely capturing keystokes as they occur.

If a user is logged in, they can compose a tweet. If during that very cautious 140 character sprint, they accidentally click somewhere on the page, the browser GETs another page.

But when the user hits "back", the DIV then repopulates (after a second), with the users partially drafted tweet.

In terms of browser capability, how is this "saved form field" being accomplished?

Community
  • 1
  • 1
David Rodecker
  • 117
  • 1
  • 6

1 Answers1

0

I'm guessing to achieve this, one could implement either:

  1. local-storage This would just involve writing to the local storage upon each keystroke. Upon loading the page, the JS populates the tweet composer with the session local storage. See a live example of utilizing local storage. This would be nice and slick, but a major limitation is that this is limited to HTML5 browsers.

  2. AJAX callback Similar to the first method, but instead of writing to local-storage, the draft tweet is written to a web service. Upon loading the page, a callback is made to retrieve the content; populating the tweet composer.

  3. Cookie approach. Similar to the local-storage, but would write to cookie cache. The benefit with this method might be more ubiquitous browser support.

I'd love for someone to explain the pro's/con's of each method along with some sample code. Bonus if it's under 140 characters for each code sample :) (j/k).

David Rodecker
  • 117
  • 1
  • 6