How to display a generic text inside a text box - javascript

I have a textarea/textbox which dynamically gets url from the database. Right now the textbox is showing full url address and does not look good. What I was trying to get is use some generic text like "click here for more info". I tried placeholder but does not work. I need to use generic text and when link go to the link it gets from database. Any help will be highly appreciated.
//just for test
//this text area is getting values from db(url)
<a id="aurl" target="_blank" > <textarea id="evnt"
type="text" name="event" cols="40" disabled></textarea></a>

I don't think it makes any sense to wrap a <textarea> element in an <a> anchor tag. A textarea is expecting user input, where as an anchor tag is for linking you to somewhere else. Could just use a normal hyperlink as below?
click here for more info

Related

Empty button error in wave accessibility check

Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation

Dynamically adding a text bullet to a text area

I have a form that is pretty dynamically created based off of a project created in Pageflex Studio. I can add script or HTML elements above the text area and I can add script or HTML elements below the text area but I cannot directly edit the text area HTML.
Essentially, I have a textarea that was dynamically added that I can only target using a JQuery selector. I need to add some sort of functionality to this (either a button the user can press or just by pressing enter) where the user can create a text bullet (so not a bullet created with HTML ul/li).
So I want the final result to look something like this:
I tried using the code found from this answer but had trouble getting it to access the textarea. I'm a bit rusty on my JavaScript so I feel like I'm missing something simple here but just not getting it.
you can change bullet size copy any one [⬤,●,•] and set on the code
$("#btn_add").click(function(){
document.getElementById('todolist').value +='● ' + $("#entryText").val()+"\n";
});
#todolist {width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="enter todo value" id="entryText" />
<button id="btn_add">add</button>
<textarea id="todolist" class="todolist" name="todolist" rows="10" placeholder="Maintain your pending tasks"></textarea>

How to insert tags inside a input or textarea in html

I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.
How it is possible to design a text area like this?
You cannot directly convert the text box into tag. But you can make it look like a text box by giving a container to have the tag inside and a text box.
<div id="container"><span id="tagContainer"></span>
<input type="text" id="inputText" placeholder="input here.." />
</div>
Using keypress event, you can grab the value of textbox and append it into tagContainer. You can see the implementation here: JSFiddle
You can't.
However you can put another text block with highlight content at same position with that textarea or input.
Reference:
Visit https://codepen.io/lonekorean/pen/gaLEMR
This plugin might be helpful for you. http://aehlke.github.io/tag-it/

hyperlink and bold word text display after form submission with innerhtml with javascript

i display a block of text(based on user input) after form submission using innerHTML. i just wanted to know how to make a bold hyperlink within the text block. The text is displayed in a hidden panel below the form.
Many Thanks
I'm not sure I fully understood you question, but...
you can use the old HTML tags (like <b> or <i>) directly into the innerHTML = ""; without them being stripped.

Link a textarea to something

I have a textarea in inside which the user adds some content and edits it time to time.
I want to have that text point to URL (i.e a hyperlink inside a textarea). But since itis not possible to have a hyperlink inside a textarea, is it possible to make the whole textarea link to a URL itself ?
Add onclick event handler to the textarea and set window.location with the location you want to do to.
Other option is to use a editor like CK Editor or YUI Editor
you can use jquery:
<a href='http://example.com' style='display:none' id='textarea_link'></a>
<textarea id='textarea1'></textarea>
<script type='text/javascript'>
jQuery('#textarea1').click(function(){jQuery('#textarea_link').click()});
</script>
Then when you click on the textarea it will pass the click event onto a link and your browser will treat it as if you clicked on the link.
Note: this is not using the javascript window.open function on purpose

Categories