I have a very simple HTML5 page:
<form>
<fieldset>
<label for="cmb_unit">Unit:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
<label for="text_description">Click here and enter 1:</label>
<br>
<textarea id="text_description" name="text_description"></textarea>
</fieldset>
</form>
(or it can be tested online here: http://jsfiddle.net/4qaxR/3/)
The problem is when I select an item from the first control ("Firefox", for example) and enter a number "1" in the next control then this textarea control displays data from "browsers" datalist. Even more, if I click on something from the list then the browser page crashes immediately (it's Chrome "35.0.1916.153 m").
Is it something wrong here?
Yes it seems to be the issue with the browser, It is a chrome browser bug. They have fixed it in their beta release version 36, you will need to download from here https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula this will update your browser and the site will work smoothly...!!!
This issue had cost me 4 months of research on this issue...
Cheers..
Related
I am home unemployed due to COVID-19 and with a lot of spare time so I decided to see how hard could it be to modify some MyBB code and I was doing okay until now.
I am sure the answer to my question is out there but I am so lost that I don't even know how to search to fix my problem, I been searching and trying to figure it out for the past 4 hours and at this point, I just don't know what else to try.
Here is the code I want to modify.
<td class="trow2">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
That piece of code is from a MyBB template called "newthread".
The purpose of the code is to type a subject in a textbox in order to post a new thread.
But what I want to do is give the user a drop-down list to choose from instead of typing a text.
Here is the other piece of code I am trying to use without any success.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
If I copy-paste everything that I've tried so far, I will finish this post tomorrow and will make a lot of good HTML developers cringe like never before.
Any help is appreciated. Thanks.
PS: Adding the code to this post was another challenge on its own. XD
Well in my learning journey I came back here. The solution was very simple and here it is.
I replaced this part of the code:
<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
For this code:
<td class="trow2">{$prefixselect}
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
If I set the name or id of an Input with a list like 'cia' two strange selectable values appear at the bottom of it. Gas and gas.
Any idea why?
<input list="browsers" id="cia">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Fiddle https://jsfiddle.net/fredsaavedra/ktwrpjby/
You might have typed it into a datalist with the same ID before and your browser has cached it. Try incognito mode and they should be gone.
You can try and prevent caching with the answers mentioned here
How to turn off autocomplete while keep using datalist element in html
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
Consider the following html code
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
There are a variety of input elements for different specific purposes. For having an optional data-list with the text we replace <input type="text"> with <input list="value">. Now when <input list> tag is written, it is obvious that we are having a data-list. Then why do we need to mention an extra <datalist> tag for encapsulating the option-values? Why haven't all the features of data-list tag been added to input-list tag?
I'm not sure whether I understand the question correctly, but I think the <datalist> as you say is needed because you can add parameters like id=' '. In that case you can later do things with that certain datalist using JavaScript. e.g. using getElementId. Let me know if I answered your question.
I am trying to use aria-describedby on select box, but JAWS does not announce the text associated using the aria-describedby attribute in IE. I have even added tabindex="-1" to the span tag which is being referenced.Below is the sample code I am using. Can somebody please provide me any information on this topic.
<form action="#" method="post">
<div>
<label for="State">State</label>
<select id="State" name="State" aria-describedby="spanId">
<option value="acct">Choose</option>
<option value="act">ACT</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
<span id="spanId" tabindex="-1">This is the text</span>
</div>
</form>
You can use aria-label="spanId"
Make sure you don't use title and aria-labelfor the same HTML element because title gets suppressed.
Using IE11 and Jaws 17 I have observed this issue as well.
My take is that this is a bug.
Until it's addressed by Freedom Scientific, I'd recommend using aria-labelledby.
This means something slightly different semantically:
a label describes the essence of an object, while a description
provides more information that the user might need.
Source: Mozilla Developer Network
But it's probably the best substitute you have available.