The Shoes Manual

EditBox

Edit boxes are wide, rectangular boxes for entering text. On the web, they call these textareas. These are multi-line edit boxes for entering longer descriptions. Essays, even!

Without any other styling, edit boxes are sized 200 pixels by 108 pixels. You can also use :width and :height styles to set specific sizes.

 Shoes.app do
   edit_box
   edit_box width: 100, height: 100
 end

Other controls (like Button and Check) have only click events, but both EditLine and EditBox have a change event. The change block is called every time someone types into or deletes from the box.

 Shoes.app do
   edit_box do |e|
     @counter.text = e.text.size
   end
   @counter = strong("0")
   para @counter, " characters"
 end

Notice that the example also uses the text method inside the block. That method gives you a string of all the characters typed into the box.

More edit box methods are listed below, but also see the list of Common methods, which all elements respond to.

change() { |self| ... } » self

Each time a character is added to or removed from the edit box, its change block is called. The block is given self, which is the edit box object which has changed.

focus() » self

Moves focus to the edit box. The edit box will be highlighted and the user will be able to type into the edit box.

text() » self

Return a string of characters which have been typed into the box.

text = a string

Fills the edit box with the characters of a string.

Next: EditLine