I am using html textarea to simulate a command prompt. On typing a command command (e.g. ipconfig) and hitting Enter key, the command output gets appended to to the text. To read the output I have added aria-live="polite" attribute to the textarea which works fine with NVDA screen reader. However, JAWS on IE, starts reading from the top every time a command is entered. How do I make it read only the newly appended text like NVDA does?
So far I have tried aria-relevant="additions", role=log, role=alert attributes but nothing seems to work.
enter code here
<textarea id="commandPrompt" aria-live="polite"
rows="5" cols="45" wrap="off" spellcheck="false">
</textarea>
IN theory, you should be able to define precisely what should be read using aria-relevant and aria-atomic.
Unfortunately, Jaws doesn't follow standards very well. These two attributes are known not to always work as expected with Jaws, depending on the browser used, the element to which they are applied, etc.
This is probably not the answer you wanted to have, but if Jaws doesn't do what you expect, the only solution is most likely to put the text to be spoken in another element.
In a div or span you are much more mikely to have the expected behavior.
Related
The best iOS keyboard for entering USD currency values (pictured below) includes numbers 0-9, the decimal symbol, the comma symbol, and the dollar sign. As far as I know, the only way to get this keyboard on Mobile Safari is to use <input type="number">.
Unfortunately, iOS currently has built-in validation for the number input type which screens out commas and dollar symbols. Since this validation "feature" is embedded in the browser and Mobile Safari hasn't yet implemented the novalidate directive, there is currently no way to do this validation manually.
Using <input type="text"> would obviously solve the validation problem, but it also would bring up the regular alpha keyboard, which is not acceptable for my current project (a financial calculator).
I'm on the verge of doing something crazy, like using JavaScript to quickly switch the type from number to text after the input receives focus. I'm grasping at straws here. Any ideas?
For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.
You can use the attribute pattern for your input field as text. This instructs mobile safari to bring up the numeric keyboard. Try something along the lines of:
<input type="text" pattern="\d*" />
Just change your pattern regex to what you want.
Here is more information on the pattern attribute
UPDATE
After reading Apple's Documentation on managing Text in Webviews it seems like you are out of luck. You will have to do some javascript magic to do what you want.
The mobiscroll documentation states
This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.
The sample HTML code they provide uses inline styling to hide the original select element
<select name="City" id="select" style="display:none">
However, when I do this and setup the mobiscroll replacement to appear inline
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this
<div id="select_cont" style="display: none;">
<select name="City" id="select">
but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
introduces a dummy input element into the DOM.
<input id='cities_dummy'...
I can get the dummy to hide itself by issuing a
$('#cities_dummy').css('display','none')
immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.
Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.
I figured it out. It is all down to the
inputClass:i-txt
bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as
.i-txt{display:none}
I have a micropost feature and was testing the way it formats text that has been posted when displaying back to the user.
I pasted the following text like this:
and this was displayed back to me:
I'm using "simple_format h(content)". When I remove the helper the text is displayed with out a new line from the word "In". It displays as one big paragraph so I assume the helper is working but for some reason my double new lines are being ignored.
Any idea what is going on? Am I missing something?
By seeing it back, do you mean inside a textarea, or on the page? If it's on the page, all whitespace is compressed to one space each. If it's the latter, simply use the css rule:
white-space:pre;
On the proper selector.
However, if it is in a textarea (which preserves whitespace by default), there must be something stripping the extra space when you save it into the database. You might want to debug down your stack in the model & controller, to see where this might be happening. I have to admit i haven't used the the simple_format method.
Thanks to chrome developer tools as per usual. I realised that each text separated by 2 new lines were wrapped with p tags so I just added a bottom margin of 5px using css to p. Works perfectly.
When I enter a text with line-breaks and long sentences, I don't want to see a wrapped or without line-breaks version. What is the CSS style to accomplish this? So far I tried white-space property but none gives the result I want.
You probably want the wrap attribute of the textarea tag. Have a look at this page: http://www.tizag.com/htmlT/htmltextarea.php
I'm not 100% sure what end result you want, but if you look at the options and explanations given via that link, you should be able to choose the one that fits your needs.
As #erik said, the way to do this is to use the wrap attribute on the tag itself, i.e.:
<textarea wrap="off"></textarea>
I just wanted to note, in case you're finicky about HTML validation, that the wrap property of textarea isn't part of any HTML standard.
Unfortunately, this is the only way to do this since the white-space CSS property, as you've discovered, doesn't work quite like you would expect when it comes to <textarea> elements.
Via Sitepoint:
Internet Explorer [...] The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.
Firefox versions up to and including 3.0 don’t support the values pre-line and pre-wrap (although -moz-pre-wrap is similar to the latter). The values normal, nowrap, and pre behave like pre-wrap on textarea elements.
Opera 9.2 and prior versions don’t support the value pre-line. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.
HI All,
I know this is bit strange question, but please suggest.
I want to create a link on website url content in input type"text" field not any other html tag,Is it possible and if yes how.
Regards & Thanks
Amit
I don't know whether I understood your question correctly or not. Based on my understanding I gave the answer. Feel free to raise your question. Nothing is impossible.
</input>
It displays a text box. You can enter any data into it. If you press enter key then it forwards the page to Google.com
You can use SPAN instead of INPUT. This also serve the same purpose.
<a href="http://www.google.com" ><span style="border:1px solid blue;" >Link</span></a>
This is unfortunately not possible in the way you've asked it in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.
You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.
These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:
The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):
<input id="myTxtbox" type="text" value="http://yahoo.com">
where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:
in pure javascript:
document.getElementById("myTxtbox").value
in jQuery:
$("myTxtBox").val()
When your link/url is the text in between the and , i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):
<input id="myTxtbox" type="text">
http://yahoo.com
</input>
The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerText
jQuery:
$("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).
The result being: http://yahoo.com
When your link/url is the form of an ANCHOR () with an HREF to your url (and visible link text) in between the and , i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:
<input id="myTxtbox" type="text">
<a href="http://yahoo.com">
http://yahoo.com
</a>
</input>
Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerHTML
jQuery:
$("myTxtBox").html()
The result being: http://yahoo.com
You could simply do this :
<input type=text value="link" readonly>
So whenever somebody clicks the textbox, it works as a link, and since it's read only, there wont be any text input/change.
Be careful tho, for it wont look like a regular link and might cause confusion, or may be misinterpreted as a normal textbox.
This is how I did it with JavaScript and JQuery. This wraps the entire text field in a hyperlink, so essentially the entire text field is click-able, which may not be the functionality you are looking for. It worked for my purposes though.
The reason I didn't just use a $(nameTextField).click(function(){...}) structure is because the text field I'm using has the disabled attribute set, so click functions aren't fired. That's why I had to wrap the text field in a hyperlink.
// Make person name a hyperlink to page in new tab
var nameLink = "/exampleUrl/?initStudentId=$" + studentId;
$("#studentNameLink").replaceWith($("#studentNameLink").html()); // Unwrap any previously wrapped text fields
$(nameTextField).wrap("<a id='studentNameLink' target='_blank' href='" + nameLink + "'>"); // Wrap text field in anchor
$(nameTextField).css('color', '#326699'); // Make text blue
$(nameTextField).val(studentName); // Set text field value
Half the people here missunderstood it. The OP would like to have the content/value of the input fields to be hyperlinks instantly and NOT the fields themselves.
It is doable... although it's not an input field but the appearance acts like such one.
Use the following: contenteditable=true
HTML
<div contenteditable=true>
<a id=lnk style=-moz-appearance:textfield href=http://www.google.com>http://www.google.com</a>
</div>
or optionally -webkit-appearance ..depends
JavaScript
var lnk=document.getElementById('lnk');
lnk.addEventListener('click',()=>{
window.location.href = lnk.getAttribute('href');
});
http://jsfiddle.net/Dezain/jm9mzrzp/
You want someone clicking a textbox to actually be treated as a link click?
Sounds malicious to me but you could bind the focus event via javascript to a window.redirect().
I don't know if I get the question right. As I've understood you want to be able to type in a ...-tag into an input-field. No other tags should be allowed. You can achieve this by using PHP for example:
<!-- HTML-Code -->
<input type="text" name="link" />
// PHP-Code
$link = strip_tags($_POST['link'], 'a'); // Remove all other tags than the <a>-Tag...
Is that what you mean?
Yes, it is possible, but it's not that simple. You need to create div, or other tag you prefer, that will be always floating over your input, using CSS positions, and create anchor inside it.
For example, virtual keyboard img is embedded into input field that way on russian Google page (http://www.google.ru/)
Because of browser-compatibility it's not a simple task.
EDIT: Understood your question a little more. You still need first part of the answer, and you will need to handle keypress event inside your input. When symbol is entered you will need to update your floating div.
So now task is difficult even more. Maybe you should revise your model and not the code.