Languages

Menu
Sites
Language
Tizen TV IME - Input screen with field name and box

I am trying to make an app where i need to create a screen similar to samsung accound login.

If i laucnh tizen OSO(on screen keyboard), i dont see option to specify filed name and entered characters as shown below :

Normal keyboard is as show below :

http://developer.samsung.com/tv/develop/tutorials/user-input/text-input-ime-external-keyboard

 

Let me know how can create the text field id and text box as show above ?

 

List

Responses

3 Replies
Armaan-Ul- Islam

I am not sure if I've understand your question or not, If you want to set tittle to a input field, HTML should do the work fine, like:

Password must be 6-15 charecters.<br>
<input type="password" id="userpw" placeholder="Please enter user password"></input>

And the text box can be modified using CSS.

#userpw{
    ....
}
Abhilash Kankokkaran

Thanks for your reply. You did not understand my question.

In the case above "Passowrd must be 6-15 characters" is not a place holder.

I will insert first acreen for your understanding.

Once user press id or passowrd, the focus event is called and the keyboard is shown.

Usually keyboard dont have the part marked in red box below. I want to know how can it be created ?

The usual keyboard can be seen here,

http://developer.samsung.com/tv/develop/tutorials/user-input/text-input-ime-external-keyboard

 

 

I need the part on top of usual keyboard also drawn. Hope you understood the scenario. If you have a samsung tv, just open a keyboard from any app. You will understand the question better.

 

Thanks in advance.

Armaan-Ul- Islam

1. As far as my coding skill goes what I can help is: Use JavaScript events to capture the triggers and show necessary messages to users.

Example Code Snippet:

<!DOCTYPE html>
<html>
<body>

ID: <input type="text" id="ID"><br>
Password: <input type="text" id="password" onfocus="showMsg()"><br>
<input type="submit" value="Submit" onclick="mark()">

<p id="myPlace"> </p>

</body>

<script>
function showMsg(){
    document.getElementById("myPlace").innerHTML="Password must be 6-15charecters";
}

function mark(){
	var pass=document.getElementById("password").value;
    if(pass.length<6 || pass.length>15)
        document.getElementById("myPlace").style.color = "red";
    else
    	document.getElementById("myPlace").style.color = "black";
}

</script>

</html>

You can also check this jsFiddle : https://jsfiddle.net/d1m9sxr7/1/

 

2. Now, You have to find the ID of the exact place/tag (top of the keyboard) where you are trying to show the message if you want the meassage exactly right there. In that case I guess you have to design your own Input Method Editor (IME) / Keyboard. You would find a little Idea of how to do it from the sample app:

New > Tizen Project > Sample > wearable 2.3.1 >   Web application > Input Method Editor > IME Double Keys

(Or I guess there could be any other procedure that I dont know yet...)