I would like to disable copy event in the TextArea I'm using. To achieve so I added the following code block:
function initTA(){
var tf:IUITextField = body.mx_internal::getTextField();
tf.enabled = false;
}
<mx:TextArea id="body" creationComplete="initTA()" .../>
This is working fine unless the text area has lots of text inside in which case a scroll bar appears. After the scroll bar is being used by the user, the text area stopped blocking the copy event.
By the way, I am using text area for display purposes since I use rich text area format.
Appreciate your help
Thanks!
Uri
A possible solution for this issue is to disable the focus of the text-area component
function initTA(){
var tf:IUITextField = body.mx_internal::getTextField();
tf.enabled = false;
}
<mx:TextArea id="body" creationComplete="initTA()" focusEnabled="false" .../>
This way when the scroll bar is being used (due to lots of text in the text-area), the focus is not returned to the textarea and an indirect manner disables copy.
Related
I want to achieve a functionality in which, if I click on the canvas, a textbox should appear. After entering the text and click save button, it should save that text on a canvas. Again if I click on canvas somewhere else, it should again add a new textbox. In short, I want to add a new text box on click of canvas and want to save the textbox value.
Give me any good reference where I can learn canvas. I am asking for good tutorial in order to achieve specified functionality.
You can give coordinates of canvas or id where you click. Also have a variable to set it as {0 if text box available, so have to save. 1 if text box not available so have to add text box}. Swap them and add text box or save them accordingly.
If you have a large are where you have to find clicked or not, you can add as
$("#canvasid").click(function(){
var $this = $(this);
if($this.data('clicked')) {
var table = $(this).closest('sometablewhereiwanttextbox');
if (table.find('input:text').length < 7) {
table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
}
});
Alter the code as needed.
Saving to DB depends on the technology you use. If its MVC or asp.net, then use AJAX calls to pass the data to back end and save them using web method.
Hello Stackoverflow community. This is my first question, but I will try to be as concise and detailed as possible.
I have been tasked with updating our ASP.NET web applications to be section 508 compliant. This is all very new to me, and I'm having trouble getting things to work as expected.
We have a page where the user gets additional information about a link via an onmouseover event. Obviously this doesn't work for non-sighted users. So we are providing them with a "More information" button that displays the same "tooltip" div that the sighted user gets.
I added aria-live="assertive to the "tooltip" div with the understanding that if the div was hidden when the page loads and then shown via the button, it would be read by JAWS. To my dismay, this wasn't the case.
The tooltip div looks like this:
<div id='tooltip' aria-live='assertive' style='display:none;'>
<span id='tooltip_message'>This is my tooltip text</span>
</div>
It is shown via the click event of the button with the following JavaScript code:
function ShowTooltip(ttID)
{
var tt = $('#' + ttID);
tt.css('display', '');
}
The button to show the tooltip div looks like this:
<button id='ttBtn' onclick="ShowToolTip('tooltip'); return false;">
More information
</button>
I had success getting JAWS to read the tooltip by adding role="alert" to the tooltip div, but I'd like to avoid using the alert role for non-alert purposes. Mainly because it reads "Alert, this is my tooltip text." to the user.
I'd like to know what is the proper method to get jaws to read the tooltip when it becomes visible?
I am using IE 11 and JAWS 16. Internet Explorer and JAWS are requirements that I cannot change.
Thanks!
-Ray
UPDATE
I thought I'd post the solution we used in case others have the same problem. This is a simplified version of our code that shows just what's necessary to get the tooltip visible and read when it is displayed. This is a server control, so many of the ID's are based off of the control's ClientID property and have known suffixes (_tootip, _tooltipcontainer, etc.)
JavaScript:
//handles showing/hiding of the tooltip
function ShowToolTip(ttID)
{
var tt = $('#' + ttID + '_ToolTip');
var ttContainer = $('#' + ttID + '_ToolTipContainer');
var ttClone = tt.clone();
tt.remove();
ttClone.css('display', '');
ttContainer.append(ttClone);
}
//Closes the tooltip and returns focus to the hidden (from sighted users) button that shows it.
function CloseToolTip(ttID)
{
var tt = $('#' + ttID + '_ToolTip');
tt.css('display', 'none');
}";
Markup:
<button id="tooltip1_508KeyboardButton" class="hidden" onclick="ShowToolTip('tooltip1'); return false;" onblur="CloseToolTip('tooltip1');">Click for overview</button>
<div id='tooltip1_ToolTipContainer' aria-live='polite' aria-atomic='true'>
<div id='tooltip1_ToolTip' class='section tooltip' style='display:none;'>
<span id='tooltip1_Msg'>This is my tooltip's text.</span>
</div>
</div>
I hope this is of use to someone in the future. As I think about it, I could have easily placed an aria-live region that stays visible somewhere off screen that changes it's text when the tooltip is "shown". So there are many ways to skin this particular cat.
As a quick hack, the following seems to work for me with IE11 + JAWS 15
function ShowTooltip(ttID)
{
setTimeout(function(){
$('#' + ttID).css('display', 'block');
}, 100)
}
You could also try the following:
Push the text of your tooltips to an aria-live region that is always available "on screen" to screen readers
Shift the user's focus dynamically to the tooltip. (I'd be very careful about doing this, though. It can be confusing to your users.)
i have an auto refreshed page with one text input. If i write text on that text input and when the page refreshed, the text still there and the cursor still the end of that text. but if i add autocomplete = off in textbox style it won't work. i test this using mozilla 31.
But when i test open using chrome 36, the text i write before is disappeared after the page refreshed (with or without autocomplete = off)
here is my code
<script type="text/javascript">
$(function () {
var SearchInput = $('#text');
var strLength = SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});
#Html.TextBox("text", null, new { style = "width: 800px"})
This is default behavior by the browser from my experience only with FireFox.
If you want to make sure the data is always in the textbox on refresh, then you will need to do something like create a javascript cookie with the textbox data inside onChange of the textbox or so, and then append that cookie data inside the textbox in the page onLoad event. You can also add a querystring to the page upon refresh, or use HTML5 storage, if you do not want to write a cookie.
I ran into an irritating feature of using ckeditor.
When you upload an image, in between your text content or wherever, ckeditor automatically fills in the width and height input fields as a default, which causes an html tag with width and height set in the style attribute:
<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg" style="width: 2000px; height: 669px;">
But if you delete the values in the input fields and then submit, the width and height is not set:
<img alt="" src="/uploads/ckeditor/pictures/196/content_David_Leo006.jpg">
Now like any normal, bright healthy web developer from the 21st century, I have a responsive design that takes care of these things, so I want the tags to always be generated like the latter. How can I hide and disable the input fields for width/height altogether?
CK editor's documentation is horribly chaotic
I did something similar with Tables. I didn't want the end user putting in silly values as we were forcing responsive styling and width.
Maybe this code will help you:
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'table') {
// Get the advanced tab reference
var infoTab2 = dialogDefinition.getContents('advanced');
//Set the default
// Remove the 'Advanced' tab completely
dialogDefinition.removeContents('advanced');
// Get the properties tab reference
var infoTab = dialogDefinition.getContents('info');
// Remove unnecessary bits from this tab
infoTab.remove('txtBorder');
infoTab.remove('cmbAlign');
infoTab.remove('txtWidth');
infoTab.remove('txtHeight');
infoTab.remove('txtCellSpace');
infoTab.remove('txtCellPad');
infoTab.remove('txtCaption');
infoTab.remove('txtSummary');
}
});
CKEditor 4.5 now has a image_prefillDimensions config, which can be set to false to disable this auto-filling feature. See: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
I read several threads that talk about how the Address Bar in IE is basically the first one to get focus when using TAB (MSDN's own docs talk about this).
Yet, I have seen situations where this doesn't always have to be the case....
I have a master page and inside my content area is a formView.
It defaults to INSERT view and can never leave it (they can only insert not edit and reading is handled elsewhere)
So on my page load for the page I have:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then
'Set the default field to position the cursor there...hopefully
Dim FCtxtHrEmployeeId As TextBox
FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox)
Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString)
End If
Now that works, when the page loads it sets the cursor to the employeeID text box inside the formview's INSERT template.
HOWEVER, when I hit TAB it takes me to the address bar and THEN if I hit tab again it takes me through the rest of the items on the page.
I set the tab index of the first item to 11 and then incrimented from there (I had read that IE's toolbars have tab indexes too so I thought perhaps using a higher number would bypass those, but again that doesn't REALLY make sense since it would still start at the lowest number, but I gave it a shot thinking it would move forward from where the focus was set.) If I click on the textbox and then hit TAB it DOES move through the page like I would expect.
It is just when the page loads and gets the focus set to the employeeID textbox that hitting tab moves it to the address bar.
I also tried setting the other controls to -1 (those I didn't want it to tab to), still no luck there.
So... what can I do to get around this?
There MUST be a simple way to set the focus to the employeeID textbox and ensure that pressing TAB after that moves to the next control in the formview's insert template and does NOT jump up to the address bar?
The following jquery code seems to be working fine for me..
$(window).load(function () {
$('.myClass :visible:input:enabled:first').focus();
});
$('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) {
if ((e.which == 9) || (e.keyCode == 9)) {
$('.myClass :visible:input:enabled:first').focus();
}
});
I found another better option which is fastest as of what I tried.
Here's the code for that
function handleTabOrder() {
$('.myClass :visible:input:enabled').each(function (index) {
$(this).attr('tabindex', index + 10);
});
$('.myClass :visible:input:enabled:first').keydown(function (e) {
if (e.keyCode == 9 || e.which == 9) {
$("[tabindex=10]").focus();
}
});
}
What I have done here is to assign Tab order to all the visible controls on the page, then I have handled the key down event of only first control(that shifts the control to address bar) and now it shifts the control to next visible input item on the screen..
Its just a work around but works faster than any of the other things mentioned in the thread.
Just write the above function and all it in on-load event of page.
I was having this issue as well. For me, it was being caused by the use of the .select() method in order to bring focus automatically on a text field as soon as the page loaded. I changed my code to instead use JQuery's .focus() method and that resolved the issue.
I faced similar problem in IE. After some analysis I found that, this problem occurs if there is any HTML content outside form.
for example:
<html>
<div id="1">
</div>
<form>
//other code
</form>
</html>
It worked for me, after I moved all HTML inside form tag.
<html>
<form>
<div id="1">
</div>
//other code
</form>
</html>
Have a look at: http://www.w3schools.com/tags/att_global_tabindex.asp
Your txtHrEmployeeId element should have tabindex 1 and all other elements should have higher values.
-1 is not valid
Also verify that the tabindex are correct in the html that gets rendered (right-click in page and "view source").
I realize this is an old post, but an even simpler method is to add a "tab-stop" attribute to the form element with the last tabindex. Then bind a keydown listener and force focus to the first tabindex when the tab-stop is encountered.
Here's a simple example:
<input type="text" tab-stop />
$document.bind("keydown", function(event) {
var attrs = event.currentTarget.activeElement.attributes;
if (attrs['tab-stop']) {
angular.element.find('select')[0].focus();
event.preventDefault();
}
});
};
The answer mentioned in my other post works fine but it made the page take a huge performance hit because with every key press on the page the whole DOM was being searched for the elements.
So I found a new more optimized solution
var myNameSpace = function(){
this.selector = '.myClass :visible:input:enabled:first';
this.myElement = $(selector);
this._body = $('body');
var _self= this;
this._body.on('keydown',_self.selector,function(e){
if ((e.which == 9) || (e.keyCode == 9)) {
_self.myElement.focus();
}
});
};
The general idea being to 'cache' the node to be accessed. No need to traverse the DOM again and again for just selecting.
I had this same problem. It turns out mine was related to the ajax modal popup extenders. a modal popup was being shown, even though technically i could not see it because it was wrapped inside a parent div that was hidden. if you are using modal popup extenders, this could be causing an issue like this.
If you are using JSF or Primefaces, you can make use of:
<p:focus for"formname"></p:focus>