PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Written By
Views

jQuery - Easy editable text fields

Using jQuery you can easily create some great web user interactivity. One simple interface I wanted to create was to have an html label display some particular text and next to this text there would be an edit button. When the user clicks on the edit button the current label is hidden and a text box is shown. Then when the text box loses focus or the user hits enter the text box will then be hidden and the label will be shown again. In this post I'll show you how this can easily be done:

If you would like to checkout a demo of this functionality, you can click on the following link: https://devdojo.com/go/examples/jquery-easy-editable-text-fields/ The jQuery code used to perform this functionality is fairly straight forward and I will go through these in further detail; alternatively, if you would just like to download the sample code you can scroll to the bottom to download a zipped version. jQuery Code:

$(document).ready(function(){

	$('.edit').click(function(){
		$(this).hide();
		$(this).prev().hide();
		$(this).next().show();
		$(this).next().select();
	});

	$('input[type="text"]').blur(function() {
         if ($.trim(this.value) == ''){
			 this.value = (this.defaultValue ? this.defaultValue : '');
		 }
		 else{
			 $(this).prev().prev().html(this.value);
		 }

		 $(this).hide();
		 $(this).prev().show();
		 $(this).prev().prev().show();
          });

	  $('input[type="text"]').keypress(function(event) {
		  if (event.keyCode == '13') {
			  if ($.trim(this.value) == ''){
				 this.value = (this.defaultValue ? this.defaultValue : '');
			 }
			 else
			 {
				 $(this).prev().prev().html(this.value);
			 }

			 $(this).hide();
			 $(this).prev().show();
			 $(this).prev().prev().show();
		  }
	  });

});

Okay, let's look at the first click function:

$('.edit').click(function(){
		$(this).hide();
		$(this).prev().hide();
		$(this).next().show();
		$(this).next().select();
	});

This event fires when the pencil(edit) button is clicked. When that happens the edit button is told to hide as well as the previous element (which is the text label). Then the next element (the text box) is said to be shown and selected. Pretty Simple. The next function will perform the functionality when the user clicks away from the text box. When the text box is blurred or loses focus the following event will be triggered.

$('input[type="text"]').blur(function() {
         if ($.trim(this.value) == ''){
			 this.value = (this.defaultValue ? this.defaultValue : '');
		 }
		 else{
			 $(this).prev().prev().html(this.value);
		 }

		 $(this).hide();
		 $(this).prev().show();
		 $(this).prev().prev().show();
     });

Okay now in this function if the value of the text box is blank we will assign the previous default value of the text box. If the value is not blank we will set the label value equal to the text box value. Finally anytime the text box loses focus we want to hide the text box and show the edit button and label again. Next we want to do add the same functionality to the text box, as we did in the previous step, when the user clicks the enter key:

$('input[type="text"]').keypress(function(event) {
		  if (event.keyCode == '13') {
			  if ($.trim(this.value) == ''){
				 this.value = (this.defaultValue ? this.defaultValue : '');
			 }
			 else
			 {
				 $(this).prev().prev().html(this.value);
			 }

			 $(this).hide();
			 $(this).prev().show();
			 $(this).prev().prev().show();
		  }
	  });

When the keycode '13' (enter key) is pressed on a textbox perform the same functionality we just covered in the previous step for the blur event. And there ya go! Not too complex, just a little jQuery functionality. Here are the resources for this code below.

Resources

Click here for the live demo

or Click here to download the source files

Comments (0)

loading comments