Is there a way to make only a portion of text in a text area static or read-only without disabling the entire text area?
Basically, I want a person to be able to update a status using a textarea, and the static text would have their name and the verb is at the begining, like:
Eric is: "Riding a bike"
Is this possible?
Basic text area <input="textarea" blah="" blah"">
Further to the wishes of Jukka,
Not without using javascript to fake the effect. You'd have to handle keyboard events, mouse events and be able to identify your caret position within the textarea - all in a cross-browser friendly way. I'd run to the hills with my hands in the air!....
Or use something that makes more sense -
Show the "Eric is:" inside a label, have the "Riding a bike" inside a text input. The javascript needed to populate the label with that text is minuscule compared to that required to do it all with a textarea.
The markup could be as simple as:
<label>Eric is: <input type='textarea' blah="\" blah\"" value='Riding a bike'></label>
Related
I have a button that has visible text 'Make default', like the following button
< button type="button" aria-label="Click to make this your default card"> Make Default </button>
I want to give accessible name 'Click to make this your default card' using aria-label (to give context for button)
Jaws screen reader reading it perfectly. but accessibility test rule (https://www.w3.org/WAI/WCAG21/Techniques/general/G208) fails with following error:
"Serious: Elements must have their visible text as part of their accessible name"
Since accessible name (aria-label) does not containing display name ('Make default') so causing the issue.
But I can not change accessible text to include display text (I have to use accessible text: 'Click to make this your default card', because requirement are like that)
So, is there any way to fix this issue. so that I can have specified accessible text and display name without having above accessibility issue.
I hope, I have explained the problem clearly.
Thanks a lot.
The WCAG standards have these rules in place for a reason. But a workaround is possible using aria-labelledby. Insert your helper text in a hidden label and give the id of that label to aria-labelledby. Like so:
<button type="button" aria-labelledby="button_message"> Make Default </button>
<label id="button_message" class="hiddenlabel">Click to make this your default card</label>
Label could be hidden by
.hiddenlabel {
display: none;
}
Note: Visible text should match or be contained in the aria-label. You can maybe modify visible text if this comes up again
I am trying to make a text-based (With ASCII art) RPG game and I am having trouble with the opening sequences. Here's my script for the opening:
<body>
<pre>
Welcome To __________! <!-- No name yet :P -->
<button onclick="menuButtonPressed1()" type="button">Cool, is this the whole game?</button>
<p id="demo"></p>
<script>
function menuButtonPressed1() {
document.getElementById("demo").innerHTML = "No, there's more!";
}
</script>
</pre>
</body>
This code works fine for getting the button to show the text and all, but what I want to do is make it so that the button clears the current text on screen and changes the button to a different text. For example, what I want is that it says something, but when I press the button it will change the text and the button's text will change too. So if you see: (Ignore the color)
Welcome to ____!
(There will be button here with text "Cool, is this the whole game?")
and you press it you'll clear all the current text on screen and get only: (Again, ignore the color)
Hello to you!
(There is another button here with different text)
If there is something I could add to this to make it easier to understand or easier to answer etc. please tell me so I can correct it. I'm not very good with html yet, so if I might have gotten something completely wrong in my code, I'm sure you can understand.
you should wrap the text in some tag like <p> or <span>. Then give it an ID and use that ID at onClick of button to change that text along with button text.
It just use the same code with different ID.
I built a webpage for a professor at USF. I was wondering how to make the form submit button in the image below show up inline with the text. It looks sort of funny as is.
My current code is,
<div>The term $table is not in DDIRANK, but there are enough search results on PubMed for us to add it. To add the term, please click this button<form action=\"add_term.php\" target=\"_blank\" method=\"post\"><input type=\"hidden\" value=\"$table\" name=\"add\"><input type=\"submit\" value=\"Add $table to database\"></form> and wait for the page to load.</div>;
To make the submit button inline with the text field you will need to go to add float: left; to the button's CSS.
Declare the CSS attribute like so:
<form style="float: left">...
I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.
More precisely, I have a webpage with 7 buttons on it coded like this:
<form action="contribution.html">
<input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>
All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.
Can anyone help, please?
When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.
Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).
Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:
// A reference to your "header" element
var header = $('.header');
// When the submit button is clicked
$('[type=submit]').click(function(){
// Update the header with the button's text
header.text( $(this).value() );
});
Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.
Use a server-side language and <a> tags instead of a form.
In PHP it will look something like this:
10$
20$
30$
etc.
Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.
Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?
I need to have a piece of text, which looks like a link but actually only calls a handler when clicked. I've first wanted to use an Anchor for that but most website say to not use an anchor if it doesn't have a href, i.e. point to a URL.
So, what's the (semantically) correct way to do this in GWT?
Use a label and style it like an anchor
<g:Label ui:field="theLabelName" />
If you want to fire a history event, use the Hyperlink widget http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/Hyperlink.html
If you just want to fire a random event.. not related to history, use a label like Jan mentioned.
new HTML("My Clickable Text");
Then add the click handler to the HTML