Hi,
I have a text box that the user can input text into. How do I disable the return? I don't want them to be able to create a new line.
I would like the return key to submit the text though. And then run some script or animation if it is correct.
I thought I saw a sample of this before?
Thanks!
Cheers,
Maurice
What code/technique are you using for the text box?
You may want to consider using a <form> tag with an <input type="text"> tag. I believe using preventDefault() in the handler will stop it from trying to change the URL:
<script>
function doSomething() {
alert('hi');
window.event.preventDefault();
}
</script>
<form onsubmit="doSomething()">
<input type="text">
</form>
Otherwise there are techniques to hook into the keypress handler and preventDefault() with the return key from adding a newline and you can do other actions too.
Hi Jonathan,
This guy applied to a "check" button on click. My text box class is "answer1",
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer1')[0];
if ((answerElement.innerHTML=='55.0')||(answerElement.innerHTML=='4.50')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(1, 'Main Timeline')
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false)}
Oh, and I have an attribute attached to the text box: (contenteditable = true)
In that case you'll need to use an approach where you look at the key event.
Stealing from some answers in this Stack Overflow thread, you could probably add an on scene handler that would look like:
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer1')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='55.0')||(answerElement.innerHTML=='4.50')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(1, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}
Wow, that works brilliantly!
So I have six text inputs on this particular screen. They differ by class names. So I just create the same function and load them all into On scene Load, yeah?
Thank you so much Jonathan!
Correct; though you could also use a single function and copy/paste the amount of times you need.
Hi Jonathan,
I have all 8 text boxes have separate functions and that works great, but as you suggested I thought that it might be better to have them all in one. I am not great at javascript and putting these together is going to require more help. LOL. How would I combine the 2 functions below? In the end I will be adding 6 more to this file.
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer1')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='55.0')||(answerElement.innerHTML=='4.50')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(1, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer2')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='24.2')||(answerElement.innerHTML=='6.07')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(2, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
You just need to paste one after the other 
.
Hi Jonathan,
I literally copied and pasted the functions into one. And applied it to unload scene. It didn't work. I'll paste the whole thing here. Damn my feeble brain when it comes to code! But I am learning! While we are here is there an easy way to move focus (TAB) to the next text box after the previous one is correct?
I can't thank you enough, but I am pushing hard to include Hype as one of the main tools to convert the massive amount of Flash resources we have. I work for the Department of Education in one of the Canadian provinces. Cheers!
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer1')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='55.0')||(answerElement.innerHTML=='4.50')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(1, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer2')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='24.2')||(answerElement.innerHTML=='6.07')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(2, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer3')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='11.0')||(answerElement.innerHTML=='1.50')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(3, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer4')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='-9.81')||(answerElement.innerHTML=='0.75')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(4, 'Main Timeline')
hypeDocument.continueTimelineNamed('Trigger', hypeDocument.kDirectionForward, false);
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer5')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='-9.81')||(answerElement.innerHTML=='0')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(5, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answer6')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='35')||(answerElement.innerHTML=='0')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(6, 'Main Timeline')
hypeDocument.continueTimelineNamed('Trigger', hypeDocument.kDirectionForward, false);
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('finalAnswer')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='3467.75')||(answerElement.innerHTML=='@')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(4, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
// get the answerElement
var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var answerElement = sceneElement.getElementsByClassName('answerBucket')[0];
// add an on keypress handler
answerElement.onkeypress = function (event) {
// only run when return is pressed
if(event.keyIdentifier=='U+000A' || event.keyIdentifier=='Enter'|| event.keyCode==13) {
// your code to determine what to do
if ((answerElement.innerHTML=='265.214')||(answerElement.innerHTML=='0')||(answerElement.innerHTML=='0')) {
hypeDocument.goToTimeInTimelineNamed(3, 'Main Timeline');
} else {
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
// make sure return isn't sent to the element
event.preventDefault();
}}
I don't see anything immediately wrong with that, so it might be an integration issue - like not setting up the class names on your answer elements correctly.
The first thing to check would be the web developer console logs and see if there is an identifiable error message.
You're welcome to send a zip of the .hype document and I can take a glance to see what might be happening.
You can try checking Tab index in the Identity Inspector under the Accessibility section, and give each one an increasing value. It isn't clear to me if that would work with content editable, but worth an initial try. Otherwise you may need to do a similar keypress handler for the tab key and give a different element focus.