HTML Attribute To Allow/Disallow Handwriting Input

A new explanatory film for a new HTML attribute to handle handwritten input. Like this:

 <!-- evaluates to "true" -->
<div contenteditable handwriting="true">...</div> <!-- maybe? --></code></pre>
<p>The primary use case is for those who use one of those touchscreen writing devices like the Apple Pencil. The explanation comes from the Microsoft Edge team, so maybe the Surface Slim Pen is the impetus for this. I suppose there are other use cases, as the same devices that support pen-like input devices usually also support using the finger. There are also those text field signatures in apps like DocuSign that are incredibly difficult to sign with the mouse cursor, although it is possible.</p>
<p>We leave it to the author, Adam Ettenberger, <a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/0r_tV6k0NyA/m/oztmEjl2BAAJ" rel="noopener">articulate</a> better than I can:</p>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>The developer creating the drawing widget may not be aware that it may be located above or near an input element, and it may seem inconvenient to have to find such elements and disable the handwriting feature on them.</p>
</blockquote>
<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow">
<summary>Autoplay media</summary>
</details>
<p>Why an HTML attribute? The explainer outlines some alternatives that have been considered, including:</p>
<ul class="wp-block-list">
<li>Extending the CSS <code>pointer-events</code> Property (e.g. <code>pointer-events: handwriting</code>)</li>
<li>Extending the CSS <code><a href="https://css-tricks.com/almanac/properties/t/touch-action/">touch-action</a></code> Property</li>
<li>Extending the HTML <code>inputmode</code> attribute</li>
</ul>
<p>And why not a JavaScript API instead? Haha, we will not <a href="https://piccalil.li/blog/a-handful-of-reasons-javascript-wont-be-available/" rel="noopener">There</a>.</p>
<p>Anyway, <code>handwriting</code> on the web… let’s see if we can get a prototype!</p>
<p>Some more contextual information:</p>
</p></div>
<p>[ad_2]<br />
<br /><a href="https://css-tricks.com/html-attribute-to-allow-disallow-handwriting-input/">Source link </a></p>
		</div>
		<div class="post-text-bottom">	
			<span class="cat-links">Posted in <a href="https://hellokashifsohail.com/category/technology/" rel="category tag">Technology</a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="https://hellokashifsohail.com/author/kashinaat07gmail-com/">kashinaat07@gmail.com</a></span></span><span class="tags-links">Tags: <a href="https://hellokashifsohail.com/tag/allowdisallow/" rel="tag">AllowDisallow</a><a href="https://hellokashifsohail.com/tag/attribute/" rel="tag">Attribute</a><a href="https://hellokashifsohail.com/tag/handwriting/" rel="tag">Handwriting</a><a href="https://hellokashifsohail.com/tag/html/" rel="tag">HTML</a><a href="https://hellokashifsohail.com/tag/input/" rel="tag">Input</a></span><div class="social-share"><span>Share:</span> <a class="share-btn share-btn-facebook" title="Share on Facebook"><i class="fab fa-facebook"></i></a><a class="share-btn share-btn-twitter" title="Share on Twitter"><i class="fab fa-twitter"></i></a><a class="share-btn share-btn-linkedin" title="Share on Linkedin"><i class="fab fa-linkedin"></i></a><a class="share-btn share-btn-reddit" title="Share on Reddit"><i class="fab fa-reddit"></i></a><a class="share-btn share-btn-pinterest" title="Share on Pinterest"><i class="fab fa-pinterest"></i></a></div>				<script type="text/javascript">
					jQuery(document).ready(function ($) {
						$('.social-share').rrssb({
							title: 'HTML Attribute To Allow/Disallow Handwriting Input',
							url: 'https://hellokashifsohail.com/html-attribute-to-allow-disallow-handwriting-input/',
						});
					});
				</script>
						</div>
	</div>
</div><!-- #post-477 -->			</div>
		  </div>
		  <!-- col end -->
		</div>
        <!-- row end -->

        </div>
        <!-- container end -->

                <!-- container -->
		<div class="container-fluid">

		<!-- row -->
		<div class="row">

		  <!-- col -->
		  <div class="col-lg-12">
		    
<div id="comments" class="post-comments">

		
	<div class="form-comment content-box">
			<div id="respond" class="comment-respond">
		<div id="reply-title" class="title comment-reply-title"><div class="title_inner">Write a comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html-attribute-to-allow-disallow-handwriting-input/#respond" style="display:none;">Cancel Reply</a></small></div></div><form action="https://hellokashifsohail.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><div class="group-val ct-gr"><textarea placeholder="Comment" id="comment" name="comment" aria-required="true" >