Designing text input field

Saola Animate Support Questions
1

I saw in another support post how to create a text input field.

Is there a way to change the design of the input field (size, outline, background color, etc.)?

Thanks!

2

Hi Shawn,

Yes, you can use CSS, e.g.

<input style="width: 100%; height: 100%; border: 2px solid blue; background-color: red;" type="text" />

FYI, we’ve planned to support text input field in version 3.

Regards

3

Trying to get an expanding input box so trying to use this version: http://jsfiddle.net/7j5yswpb/6/

I don’t mind using your version or this one. Am trying to achieve the following. I have put the basic steps in place but don’t know how to integrate the input text.

Untitled1.saolapack (3.0 KB)

image
image1919×1079 128 KB

Would appreciate a saolapak that illustrates how to do this.

Thanks!

4

Any thoughts on this? Is it not feasible?

Might help in building Text-input for Saola which I believe is on the new features list …?

Thanks!

5

Hi Shawn,

Saola Animate allows adding custom JavaScript and CSS, so virtually, you can do anything which CSS and JS supports.
Please see the attached sample which uses contenteditable attribute and CSS static position to create an expanding input field as you described.

expanding_input.saolapack (2.7 KB)

Regards

6

This was very helpful!!! Thank you.

2 questions:

  • How can I remove the blue box within which the user types upon click?
  • Why is the Submit button not showing in Scenes 1 and 2 (Scene 3 is a cut / paste of your scene where Submit shows)?

If possible, can you edit the file reflecting these questions?

expanding_input1.saolapack (9.9 KB)

Thanks so much!

7

Hi Shawn,

Unfortunately, nothing works in your project.
Let me describe my sample in details so you can recreate:

  1. Make the input div editable when the scene is activated:
  function onSceneActivated(doc, e) {
    doc.getElement('input').textDom.contentEditable = true;
  }
  1. Create input clicked timeline to change the background color, dim the separator line, and show Submit button.
  2. Run input clicked timeline when the input shape receives mouse down event for the first time:
  function onInputMouseDown(doc, e) {
    if (this.userClicked)
      return;
    this.userClicked = true;
    doc.getTimeline('input clicked').start();
  }
  1. Get text inputted, say thank you, hide submit button when submit button is clicked
  function onSubmitClicked(doc, e) {
    var inputDom = doc.getElement('input').textDom;
    // get text input
    var textInput = inputDom.innerText;
    // show thank you
    inputDom.contentEditable = false;
    inputDom.innerHTML = 'Thank you!';
    inputDom.style.textAlign = 'center';
    // hide elements
    doc.getElement('line').show(false);
    this.show(false);
}
  1. Use CSS to make input field expand when typing:
  .group {
    border-radius: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    height: auto !important;
  }
  .group div {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  .input {
    min-height: 1.2em;
  }
  .group div.line {
    height: 2px !important;
    margin-bottom: 10px;
  }
  .submit p {
    margin: 0;
  }

Regards

Iframe and Saola