Forum Discussion
Fake a Blinking Cursor
You could also insert a pipe or vertical bar (|), align it with the cursor, and animate it with CSS. Initially, hide the pipe. When the text field is not in focus, the pipe will show and start blinking. When the text field is in focus, the pipe will be hidden, and the cursor will show. I know it might be a bit much, but it's the only solution I can think of right now. I did not have time to try Andrew's solution but it looks like it could work too. It sounds like JAWS is automatically focusing on the data entry field as soon as it’s loaded, which might be interfering with your testing or development. I think the issue is due to the removal of the data entry field placeholder. To fix it, create a new data entry field, remove the placeholder from this new field, position it off-screen, and exclude it from the focus order. This way your original data entry field will not get immediate focus. Anyway, a fake cursor code:
const addCSS = css => {
const style = document.createElement("style");
style.textContent = css;
document.head.appendChild(style);
};
addCSS(`
.blink {
-webkit-animation: blink 1.1s step-start infinite;
animation: blink 1.1s step-start infinite;
}
@-webkit-keyframes blink {
0%, 50% {
opacity: 1;
}
50.01%, 100% {
opacity: 0;
}
}
@keyframes blink {
0%, 50% {
opacity: 1;
}
50.01%, 100% {
opacity: 0;
}
}
`);
const pipe = document.querySelector('[data-acc-text="pipe"]');
const textField = document.querySelector('.acc-textinput');
textField.addEventListener('focus', function() {
pipe.classList.remove('blink');
pipe.classList.add('hidden');
});
textField.addEventListener('blur', function() {
pipe.classList.remove('hidden');
pipe.classList.add('blink');
});
This is also helpful. I'm going to try this as well. A few questions.
How do you add css to Storyline?
You wrote this:
I think the issue is due to the removal of the data entry field placeholder
What is the placeholder? The "Type your response here" text?
You wrote this:
This way your original data entry field will not get immediate focus.
But won't it still read the text entry field first?
Thank you!