How does the Google Keep text input work? - javascript

I'm looking into creating a text editor for my site and really liked how Google Keep does their text input. At first look based on the HTML, they don't appear use input fields / text areas but rather some sort of javascript mode of input that takes text input and generates the HTML equivalent that text and places it in the DOM. So is it likely that they built their own input functionality to allow them and the user to manipulate the content they put in? Or is it more likely that they have an all purpose input field or something that captures the data and it's just hidden from view?
This is all I see when I go looking into the DevTools
<div contenteditable="true" aria-multiline="true" role="textbox" class="notranslate IZ65Hb-YPqjbf h1U9Be-YPqjbf" tabindex="0" spellcheck="true" dir="ltr">
This is their "input field"
<br>
That renders html
<br>
Based on the text that's entered
<br>
But I want to know how I should be capturing this text
</div>

The contenteditable="true" and role="textbox" tell the DOM to treat the <div> element like a <textbox>. According to the WAI-ARIA Standards, this approach allows those with reading impairments to navigate the screen more easily, as a screen reader would have a better idea of what elements are on the page.
Without seeing the rendered DOM, I can't be 100% sure what Google is doing, but it is very easy to manipulate the DOM based on user input as such. In the following example, I'm using targeting the input element, and then creating an onkeyup function that writes the content in a secondary 'output' <div>. This second <div> mirrors the input in the example, though can be coded to send the input to another page (or database) with AJAX, included elsewhere on the page, or styled to format the input in a nicer fashion.
// Initial text
document.getElementById('output').innerHTML = document.getElementsByClassName('h1U9Be-YPqjbf')[0].innerHTML
// On change
document.getElementsByClassName('h1U9Be-YPqjbf')[0].onkeyup = function() {
document.getElementById('output').innerHTML = document.getElementsByClassName('h1U9Be-YPqjbf')[0].innerHTML
}
.h1U9Be-YPqjbf {
border: 1px solid blue;
}
#output {
margin-top: 20px;
border: 1px solid red;
}
<div contenteditable="true" aria-multiline="true" role="textbox" class="notranslate IZ65Hb-YPqjbf h1U9Be-YPqjbf" tabindex="0" spellcheck="true" dir="ltr">
This is their "input field"
<br> That renders html
<br> Based on the text that's entered
<br> But I want to know how I should be capturing this text
</div>
<div id="output"></div>
Hope this helps! :)

I thinks behind the scenes they uses Firebase three way binding.
You can achieve the result with Angular and Firebase. Both are free to get started.
More here link

Related

add new line in textarea not working in my CI project [duplicate]

How do I save user-entered line breaks from a <textarea> HTML element to a database?
It always removes the line breaks.
TextArea HTML element is preserving the white space in the database.
The problem appears when trying to display the \n on the web browser, which will fail.
To display \n in the web browser use :
<p style="white-space: pre-line">multi-line text</p>
When displaying the content you need to convert line breaks into <br /> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of "\n" with "<br />".
Just put the output text between <pre></pre> tags, that will preserve the line breaks.
I just learnt to use php's nl2br function and it is working fine for me.
I'm using it to style how my users receive an email when sent from another user.
Your problem will be solved using 'white-space' property: simply use:
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
And continue your work.
I know from experience that Browser text areas are less well-behaved than one would like, especially with regard to line breaks.
You could can to see if javascript would be able to interrogate the text area and find the line breaks before the text is sent to the server and so send the data in a more well-formatted way. But the amount of javascript debugging necessary to make this work across multiple browsers is probably not worth the effort.
Perhaps you should say that format you are trying to capture your data. There may be a better way to get the data than keeping track of line-breaks - though lines breaks can seem like any easy thing to capture in user input.
I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database
Use PHP nl2br() Function while saving data from textarea to database
like below
<textarea
name="PostContent"
class="form-control"
rows="12" cols="30"
id="PostContent"
required=""
style="white-space: pre-wrap; text-indent: 50px;"
>
</textarea>
$PostContent=$_POST["PostContent"];
$output =nl2br($PostContent);
use $output variable to save to Database
you can add text in the text area and see the formatted text below.
function ex() {
const text = document.getElementById("description").value;
const ss = document.getElementById("add");
ss.textContent = text;
}
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
</br>
<button onclick="ex();">check</button>
</br>
<p style="white-space: pre-line" id="add"></p>
<style>
p {
color: red;
text-align: center;
}
</style>

Form using Javascript exclusively

I have an assigment, I don't understand it as i'm beginner.
Create a javascript script which will modify the DOM of a web-page.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?".
Thank you in advance.
I need to use only Javascript for this and I can only find answers
that use HTML
Web applications use HTML to contain, render and display elements in the viewport (browser window).
Where do you intend to render the form and capture user input?
You can build the DOM structure using JavaScript alone, however, there will still be a HTML file, which will contain the HTML elements created using javascript.
Please provide clarity as to your desired goal and what type of application this is being used for.
My gut feeling, for simplicity, is that you will require to use HTML as your template file, and JavaScript for interactivity and manipulation of the HTML file.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?". That's it.
This is a start, just to try to help you to understand the concepts.
I do, however, implore you to go and explore with confidence - you won't break anything, just give it a try!
I recommend you try taking a look at some of these articles, have a look at my (very rudimentary) code below, and feel free to ask any questions you have!
JS:-
W3 Schools JS and HTML reference
HTML:-
W3 Schools: HTML Forms
W3 Schools: Label Tag
W3 Schools: Text Area Tag (This has been left out of the solution on purpose - give it a try!!)
(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class??
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="Mickey Mouse">
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="mickey#mouse.co.uk">
<br><br>
<input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
</head>
<body>
</body>
</html>

Javascript hide HTML text if input box is not filled

I have an HTML form where users are able to input their mobile number. See below:
<form class="formulario" action="signature_test.html" method="get" onsubmit="return signature_Alert()" >
Mobile (mgrs): <input type="text" name="mobile" id="mobile"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
Whatever the user enters, is then populated in another HTML file. It innerHTML the text "Default":
<font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>
However, I would like that if the user leaves the mobile field blank, to have the "Mobile:" and the "Default" not displayed. Is that possible with Javascript?
By the way, this would be the Javascript that innerHTML the "Default" text.
<script>
var values = window.location.search.substring(1).split('&')
var mobile = values[3].split('=')[1]
document.getElementById('mobileInput').innerHTML = mobile;
</script>
Thanks.
Sure, just wrap the content in an element you can target and modify:
<span id="mobileInputContainer">
<font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>
</span>
Then just adjust that element's style similar to how you already adjust another element's content:
if (mobile.length < 1) {
document.getElementById('mobileInputContainer').style.display = 'none';
}
You'd of course want to double-check the actual value you're getting for mobile in your code. Make sure it doesn't have whitespace, etc. Or really tweak whatever your logic is for determining that no value is present to display. But the actual act of hiding the element is simple, just set the style to be hidden.
Additionally, I'd like to echo a comment above. <font> tags really shouldn't be used anymore. You'll find a little bit of an introduction to CSS styling can go a long way here. I recommend some introductory tutorials on the subject.
You also appear to have an errant </b> in your code. Perhaps you're not showing us the entire content. Either way, you'll want to double-check your HTML as well. Always start with valid and well-formed HTML before using any JavaScript or CSS, or behavior may not be what you expect.

HTML - Undeletable placeholder in input element

I have an URL field in my form.
The validator requires for it to have http:// in front of it,
which I think many people won't understand.
Could I have a "placeholder" that the user cannot delete or write before it?
Example: http:// myinputhere.com
<input type="url" placeholder="http://">
Placeholder doesn't concatenate the placeholder text to the user entered text, it's just for any information you would like to provide to your users, like some programmers do not use label instead they write placeholder for example
<input type="text" placeholder="Enter Username Here" />
So here you can do that is, either you can have a predefined http:// value..
<input type="url" value="http://" />
Or you can use JavaScript or jQuery for client side validation instead of HTML5 type="url" which will give only meaning to your semantics but you cannot rely on HTML5 validation only.
Also if you want to preserve your semantics by using type with a value of search or url than you can disable the HTML5 validation using novalidate attribute for your form tag.
OR
You can use multiple field, one with type set to url and other to text and you can concatenate both the field values ..
input[type=url] {
width: 40px;
}
<input type="url" value="http://" readonly />
<input type="text" />
Demo
Note: Using client side validation like HTML5 and JavaScript can be
easily disabled by your users, I would recommend you to have a server
side validation if this matters to you alot.. But relying on client
side validation ONLY is not good.
Why don't you use javascript in order to do so. I assume that you have any HTML tag like this
<input id="test" type="url" onclick="testJS()" placeholder="http://">
and try this following javascript
function testJS(){
var a = document.getElementById("test");
a.value = "http://";
}
You can display a span element over the input like this:
HTML:
<div class="wrapper">
<input type="url" />
<span>http://</span>
</div>
CSS:
.wrapper {
position: relative;
}
input {
padding-left: 48px;
}
.wrapper span {
position: absolute;
left: 2px;
}
Example
No, you cannot have initial content that cannot be deleted.
The question implies a wrong approach because a) users may need to delete http:// e.g. if they need to enter an https: URL, b) placeholders aren’t for this, c) if you use value="http://", it’s not a meaningful default value and it makes the control initially invalid, d) if you use type="url", you are asking for a control that takes an absolute URL as value and leaving it to browsers to implement that.
What you can do to help users who don’t know how to type an absolute URL is to use a title attribute, which has a special function in a context like this: its value will appear in an error message shown by the browser, if the user tries to submit the form when the control value is invalid. Example:
<input type="url" title="An absolute URL (usually starts with http://)">
You can either use Javascript and jQuery to do this. (still searching for solution)
Or you can put the http:// text in the text box with:
<input type='url' value='http://'>
Or you can add some text in front of the text box and then accept the input to be without the http:// text
<p style='display: inline-block'>http://</p><input type='url' style='display: inline-block'>
You can also use css positioning to show a span element on the input box and then add padding to the input box so that the user input won't go over the span element.

How to make the input have text in it while on focus?

Please check the link below:
http://jsfiddle.net/cT9kg/4/
As you can see its a search field with a button.
If you have trouble understanding what I mean below please just look at the "Title" input on the Ask a question page.
The input has autofocus on.
BUT
How can I have it so text is already in the input with autofocus on but as soon as someone types into the input the text disappears.
AND
When someone has entered text in the input but then deletes it, it goes back to the way it was at the beginning: on focus with text in it instructing the person what to type in the input.
Thanks!
James
You could define the default value.
On focus - empty value, if the value is default value.
When the element lose the focus, You could check, if it's empty, and if Yes - restore the default value.
I've tested this as working, just make sure you put the <script> part just before the </body> tag.
<input type="text" class="input1" autofocus="focus" id="search" value="Type here..." onKeyPress="checkValue()" />
----
<script type="text/javascript">
var searchEl = document.getElementById('search');
var defaultValue = searchEl.value;
function checkValue() {
if (searchEl.value == defaultValue) {
searchEl.value = "";
}
}
</script>
You could use the HTML placeholder attribute, but in the majority of browsers that won't achieve quite what you are after: as soon as the input is focused, the placeholder text disappears.
For functionality akin to iOS (found on sites such as Twitter as well), you need to use JavaScript. One example can be seen online here.
This similar question (and this one) have some useful alternatives and code examples.
You're correctly using autofocus, which is fine but has patchy browser support. You can add in a JS fallback, like this (taken from here):
<script>
window.onload = function () {
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("s").focus();
}
}
</script>
Wow. I tried digging around in the source code for the Ask a question page. Talk about convoluted.
Here is the CSS File.
While it seems the relevant bits are thus, they don't seem to DO much more than format (other than the edit-field-overlay trick.
.form-item {padding:10px 0px 15px 0px;}
.ask-title {margin-bottom:-15px;margin-top:-10px;}
.ask-title-table {width:668px;}
.ask-title-field {width:610px;}
.ask-title-cell-value {padding-left:5px;}
.edit-field-overlay {display:none;}
HTML (some TD tags removed):
<div class="form-item ask-title">
<table class="ask-title-table">
<tr>
<td class="ask-title-cell-value">
<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field" value="">
<span class="edit-field-overlay">what's your programming question? be specific.</span>
</td>
</tr>
</table>
</div>
But I totally could NOT figure out the relevant Javascript bits. As there are NO onEvent handlers for this form that I can see, the only reference to this field (title) would be in the prepareEditor function.
Anybody care to try and explain it to a relative newbie??

Categories

Resources