Textbox input, prototype for comfortable input, small code

A slightly more comfortable textbox/input. Perhaps this helps, short code, often not more is needed. No extension, simply lean code using a HTML/JS script.

The AppInventor code uses a Webviewer component. Then you can use HTML functions for selection, copy, insert, cut........ For example: Add a textbox and paste selected text from the Webviewer if needed.

"take" sends the content to AppInventor
use "setHeight/setWidth" to change the dimensions.
Select an item from the spinner to be inserted into the textarea. The needed JS-function is provided within the HTML file. With additional JS code/functions it can be extended without frontiers.
You can customize all to your favour. It's easy. Little knowledge of HTML would help of course.

TEMPLATE_Textarea_2022.aia (3.8 KB)

HTML_Textarea_plugin.txt (1.8 KB)

3 Likes

If you don't mind, I will extract parts of your sample and post them here for easy reading.

It will help me and others understand the JavaScript flow.

The html file:

<!DOCTYPE html>
<html>

<head>
<style>

p{	float:left;
    margin-right:2px;padding-left:2px;padding-right:2px;
    border-color:black;border-style:solid;border-width:1px;
    font-size:12px;font-family:arial;text-align:center}
    
</style>
</head>

<body>

<textarea id="ta" style="width:100%;height:150px;" onclick="textInfo()" oninput="textInfo()">
</textarea>

<p id="x">x: | y: | size:</p>
<p id="c1" style="background-color:black;color:white" onclick="changeColor(this)">col</p>
<p id="c2" style="background-color:white;color:black" onclick="changeColor(this)">col</p>
<p id="c3" style="background-color:lightgray;color:black" onclick="changeColor(this)">col</p>
<p id="c4" style="background-color:blue;color:yellow" onclick="changeColor(this)">col</p>
<p id="c5" style="background-color:lemonchiffon;color:black" onclick="changeColor(this)">col</p>
<p id="b1" onclick="undo=ta.value;ta.value=''">clear</p>
<p id="b2" onclick="UnDo()">UnDo</p>
<p id="b3" onclick="window.AppInventor.setWebViewString(ta.value)">take</p>
<script>

let ta=document.getElementById("ta");
let undo="";

function UnDo(){if(undo!=""){ta.value=undo;undo=""}ta.focus()}
    
function setWidth(w){ta.style.width=w}
function setHeight(h){ta.style.height=h}

function changeColor(this_){
	ta.style.backgroundColor=this_.style.backgroundColor;
    ta.style.color=this_.style.color}

function elem(id){return document.getElementById(id)}

function textInfo(){
    let pos=ta.value.substring(0,ta.selectionStart).split("\n").length;
    let x="x: "+ta.selectionStart+" | ";
    let y="y: "+(pos-1)+" | ";
	elem("x").innerHTML=x+y+"size: "+ta.value.length}    

function insert(insertText){
	let pos=ta.selectionStart;
    ta.focus()
    ta.setRangeText(insertText,pos,pos,"end");
    textInfo()}

textInfo();

</script>

</body>
</html>

Here is a sample run ...

Sample run

Designer:

Thanks for the JavaScript lesson!

2 Likes

See also

textedit.html.txt (12.3 KB)

1 Like

Hello ABG,
yes, feel free to use all as you like, the same to all other readers here, without any restrictions. This is the result of how to improve a quick text input with the possibility to insert text at cursor position that is by now not possible within AppInventor because of a lack of getting the cursor position. The one above is very simple to use. Let me say that I have been dealing with HTML and JS since several months as a beginner because for a long time I didn't have any idea of how to use the JS_run blocks. It took me some time to evolve it and to understand what does happen assigning an html file to the webviewer, but is was worth it. So if there are any ideas to improve or corrections I'm looking forward to them.

Very interesting, thanks for posting.

1 Like