Handling Blur for One Element

When the user puts their focus inside (tabbing or clicking into the field) the input field (with id equal to 'nickname'), we 'bold' the text. When they 'blur' (input field loses focus) we change the font weight back to 'normal'.

$proto('#nickname',  {
  Blur:  {
    onBlur:  {
      SetStyle:  {
        fontWeight:  'normal'
      }
    }
  },
  Focus:  {
    onFocus:  {
      SetStyle:  {
        fontWeight:  'bold'
      }
    }
  }
});

Handling Blur for Multiple Elements

A very powerful concept within protoscript is the ability to manage behavior across a set of elements and their related elements.

Here we have a form with 5 input fields, each with their own label.

We select the blur/focus events for the input fields ('.employee-form input' means select all elements of type 'input' that are inside an element with class name 'employee-form).

We then target the corresponding labels ('employee-form label') for style changes (SetStyle).

$proto('.employee-form input', {
  Blur: {
    onBlur: {
      SetStyle: {
        target:'.employee-form label',
        fontWeight: 'normal',
        color:'#000000'
      }
    }
  },
  Focus: {
    onFocus: {
      SetStyle: {
        target:'.employee-form label',
        fontWeight: 'bold',
        color:'#0000FF'
      }
    }
  }
  
});

Changing Select Targets to Manipulate Related Elements Simultaneously

Here we have a variation on the previous example.

In the outer SetStyles we target the labels (changing their fontWeight and text color with blur/focus). All behaviors implement a callback that is fired when the behavior executes. Notice we use SetStyle's onSetStyle callback.

Inside these callbacks we select a new target-- the input fields changing their fontWeight.

The result is when the user tabs into a field both the label and the input field are bolded and the label is also set to blue. When the user tabs out of an input field, the label and the input field are set back to a normal fontWeight.

$proto('.employee-form-2 input', {
  Blur: {
    onBlur: {
      SetStyle: {
        target:'.employee-form-2 label',
        fontWeight: 'normal',
        color:'#000000',
        onSetStyle: {
          target:'.employee-form-2 input',
          SetStyle: {
            fontWeight: 'normal'
          }
        }
      }
    }
  },
  Focus: {
    onFocus: {
      SetStyle: {
        target:'.employee-form-2 label',
        fontWeight: 'bold',
        color:'#0000FF',
        onSetStyle: {
          target:'.employee-form-2 input',
          SetStyle: {
            fontWeight: 'bold'
          }
        }
      }
    }
  }
});