I’m trying to build a Samsung Smart TV (Tizen) app. Now the app works on real Testing TV Series 6000.
I have four textfields with autofocus in the first textfield. The TV keyboard opened and I see the “Done” button. What can I do to have consecutive input with “Next” Button?
Please look at 5.4: https://www.samsungdforum.com/UxGuide/2014/05_text_input.html
I doesn’t find any information about that…
My source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1920, initial-scale=1.0, maximum-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script language="javascript" type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script language="javascript" type="text/javascript" src="scripts/keyTizen.js"></script>
<script language="javascript" type="text/javascript" src="scripts/main.js"></script>
</head>
<body>
<div class="first">
<input type="text" placeholder="Dein Name" name="yourName" id="yourName" autofocus />
<input type="text" placeholder="Band / Interpret deines Wunschsongs" name="band" id="band" />
<input type="text" placeholder="Titel deines Wunschesongs" name="title" id="title" />
</div>
<div class="second">
<textarea placeholder="Deine persönliche Grußnachricht" name="message" id="message"></textarea>
</div>
</body>
</html>
You can try 'blur' and 'focus' of consecutive text fields using their element id and bind the action to other keys available on keyboard.
Use triggering 'keydown' event to focus to next input.
Specific keyCode for other keys and event listener are described here.
https://www.samsungdforum.com/TizenGuide/tizen271/index.html
Related
At the moment I am building an chatbox for my work, I got it all working fine on PC, it refreshes on a certain second, when I send/receive a message the last message is shown at the bottom.
The problem now, is that everything works too on the phone EXCEPT, auto scrolling down to the last message. So you only see the second last message, you need to scroll down with your finger on the phone to see the last message.
I tried many things as in cSS only or jQuery methods, nothing seems to work, maybe you guys can help me find the golden ticket.
Current code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/chatbox.css?v=5121">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="main">
<div class="box">
<h1>Chat</h1>
<section class="chatbox">
<section class="chat-window">
<div id="chatboxajax"></div>
</section>
<form class="chat-input" method="post">
<input type="text" name="message" autofocus autocomplete="off" placeholder="Message..." />
<input type="submit" style="position: absolute; left: -9999px"/>
<button>Send</button>
</form>
</section>
</div>
</div>
<script>
$('#chatboxajax').load("chatboxAjax.php");
setInterval(function(){
$('#chatboxajax').load("chatboxAjax.php");
}, 1000);
</script>
</body>
</html>
Okay, so when I follow the directions here for getting started with Materialize CSS, my input form always turns out like this:
My current index.html file is this:
<!DOCTYPE html>
<html>
<head>
<title>IRS</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="node_modules/materialize-css/css/ghpages-materialize.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="node_modules/materialize-css/js/materialize.js"></script>
</head>
<body>
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
</body>
</html>
My electron version is 1.6.6 and node is at 6.10.3
Add "active" class to the tag and try
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name" class="active">First Name</label>
</div>
if you want only label animation, remove the placeholder for the <input> tag
Hope it works..
For anyone else with issues using materialize css with electron, here is how to get it to work the right way:
<script type="text/javascript" src="js/hammer.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
The issue is materialize.min.js is requiring hammer.min.js so you need to add it to your project and call it before materilize.min.js
I have a basic test page:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-2">
<p>Test</p>
<form name="scan">
Field 1
<br>
<input type="text" name="first" id="first">
<br>
Field 2
<br>
<input type="text" name="second">
<br>
Field 3
<br>
<input type="text" name="third">
<br>
<br>
<input type="submit" name="submit">
</form>
</div>
<script>
$( document ).ready(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
It works as expected in all Windows browsers.
The Jquery code does not work when loaded into Safari or Chrome on an iPhone with the latest iOS.
I also tried:
document.getElementById("first").focus();
I also put some alerts around the commands and the alerts worked but the focus did not happen into the first field.
Where am I going wrong?
Thanks
Ken
You have this code
$("input:text:visible:first").focus();
You want to focus on the first textual input. You can do it like this:
$("input[type=text]:first").focus();
Where inside the square braces your selector specifies the value of the type attribute and we use the :first presudo-selector.
I am trying to validate a text field content should start with specific chars like GTM....... in the below example.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form>
<input type="text" id="myText" required pattern="/^GTM/"/>
<input type="submit" value="Sumit"/>
</form>
</body>
</html>
Example
You don't need to start the pattern with ^.
Just GTM.* will do:
You need the .* saying that GTM can be followed by 0 or more characters.
<form>
<input type="text" id="myText" required pattern='GTM.*'/>
<input type="submit"/>
</form>
You need to remove the / from your pattern and add .*
<input type="text" id="myText" required pattern="^GTM.*"/>
I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>