•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,658 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,819 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 4168 | Replies: 15
 |
•
•
Join Date: Oct 2005
Posts: 236
Reputation: 
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
Custom input tag? is it possible to create a tag (javascript) that will output this...
it should work like this one....
can that be done with javascript?
[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]
it should work like this one....
<input type='button' accesskey='p' value=' CODE ' onclick='simpletag("CODE")' class='codebuttons' name='CODE' onmouseover="hstat('code')" />can that be done with javascript?
•
•
Join Date: Apr 2006
Location: Mumbai, India
Posts: 351
Reputation:
Rep Power: 0
Solved Threads: 4
Posting Whiz
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
•
•
•
•
Originally Posted by aniseed 
Yes. document.write() is your hint. O...K......I tried this, with no result. Where did I go wrong? please dont be cryptic, I can be rather dense at times!
<script type="text/javascript">
<input type="button" accesskey='$' value=' Sidenote ' onclick='simpletag'document.write('[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]') ; class="codebuttons' name='Sidenote' method="post"/>
</script> Last edited by Inny : Jan 22nd, 2007 at 12:01 pm.
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
Then I tried....
but that failed too!
<input type="button" accesskey='$' value=' Sidenote ' onclick=document.write('[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]'); class="codebuttons' name='Sidenote'>but that failed too!
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 936
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
document.write() is a really horrible method. it's either invoked as a page is parsed (no scope for user interaction), or it dumps text into an arbitrary place in the document, in XHTML it's forbidden for another reason.
A better way to place arbitrary HTML at a defined place in a document is using methods like [HTMLObject].innerHTML.
There's a good reason why the HTML to write is NOT specified in the input onclick="" attribute; you run out of quoting levels far too easily (you have to enclose the event handler in quotes, and the function parameters in quotes, and the attributes in the HTML in quotes; and you can't place the same quote that surrounds a quoted block within that block without escaping it).
Also, it would make an illegal document in alot of cases because attributes shouldn't contain HTML < or > characters; some HTM: renderers would put the <span> element into the output directly, and assume that the surrounding <input> was malformed. True XHTML parsers would choke on it and show an error message instead of a page. Again, this could be got around by escaping; but that's quite messy.
Think about parameterizing the placeHTML function so that you have enough variety in what it can do, without needing the specify the entire output from onclick="" attributes.
A better way to place arbitrary HTML at a defined place in a document is using methods like [HTMLObject].innerHTML.
<div id="test">
</div>
<input type="button" accesskey='$' value=' Sidenote ' onclick="placeHTML()" class="codebuttons' name='Sidenote' method="post"/>
<script type="text/javascript">
function placeHTML(){
document.getElementById('test').innerHTML = '<span class="sidenote" title="Text"></span>';
}
</script>
There's a good reason why the HTML to write is NOT specified in the input onclick="" attribute; you run out of quoting levels far too easily (you have to enclose the event handler in quotes, and the function parameters in quotes, and the attributes in the HTML in quotes; and you can't place the same quote that surrounds a quoted block within that block without escaping it).
Also, it would make an illegal document in alot of cases because attributes shouldn't contain HTML < or > characters; some HTM: renderers would put the <span> element into the output directly, and assume that the surrounding <input> was malformed. True XHTML parsers would choke on it and show an error message instead of a page. Again, this could be got around by escaping; but that's quite messy.
Think about parameterizing the placeHTML function so that you have enough variety in what it can do, without needing the specify the entire output from onclick="" attributes.
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
I think I understand that. yur example above worked but I cant place a div with an id inside my textarea. how can get it to output to my text area shown below? Also I was hoping to include the [dohtml] in the tag surrounding span, unless i can make a tag for dohtml and the other dfor span class bla bla.
<textarea cols='70' rows='8' name='Post' class="textinput" tabindex="1"> </textarea>
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 936
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
For a textarea; try [object].text = "etc" rather than [object].innerHTML = "etc"...
I think that's the correct property; I'll get back to you on that..
I think that's the correct property; I'll get back to you on that..
Last edited by MattEvans : Jan 23rd, 2007 at 3:52 am.
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
like this???
<input type="button" accesskey='$' value=' Sidenote ' onclick="placeHTML()" class="codebuttons' name='Sidenote' method="post"/>
<script type="text/javascript"> function placeHTML(){ document.getElementById[object].textinput = '[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]'; } </script> •
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
*Bump....Any further help with this please?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 936
Reputation:
Rep Power: 5
Solved Threads: 47
Posting Shark
Where I said [object].text it wasn't literally what you should type =P
[object] relates to an arbitrary object refence; in this case, it would be a textarea that is returned from the document.getElementById([String]) function. [String] means a line of characters, in this case, the ID of the element you want to 'get'.
The times where I've put square brackets are just a notation, and probably not a formal notation either. For the benefit of explaining myself, they mean 'replace this with some object of the type within the brackets'.
if you wan't to 'capture' an object reference, you can do it like this:
You can then use member methods and properties of that (myText) type of object.
For a textarea; the text inside is stored in the 'value' property (not the 'text' property as I said previously). So, to add to the text inside a textarea, you could do:
Running that code will add 'hello' to the text in the textarea with id 'test'. That should be easy enough to adapt for adding any string to any textarea.
The problem you may encounter, if you're trying to do what I think you are, is that the value of the textarea will always be shown as plain text (i.e. HTML tags will be displayed literally with angle brackets et al). If you actually want to show live editable HTML; there's some weird MSIE/Firefox only methods; but there is no 'standard' way..
Hm... it shouldn't be toooo hard to make a way.. Perhaps I'll give it a try next week =P
[object] relates to an arbitrary object refence; in this case, it would be a textarea that is returned from the document.getElementById([String]) function. [String] means a line of characters, in this case, the ID of the element you want to 'get'.
The times where I've put square brackets are just a notation, and probably not a formal notation either. For the benefit of explaining myself, they mean 'replace this with some object of the type within the brackets'.
if you wan't to 'capture' an object reference, you can do it like this:
var myText = document.getElementById('test');For a textarea; the text inside is stored in the 'value' property (not the 'text' property as I said previously). So, to add to the text inside a textarea, you could do:
var myText = document.getElementById('test');
myText.value = myText.value + "hello";Running that code will add 'hello' to the text in the textarea with id 'test'. That should be easy enough to adapt for adding any string to any textarea.
The problem you may encounter, if you're trying to do what I think you are, is that the value of the textarea will always be shown as plain text (i.e. HTML tags will be displayed literally with angle brackets et al). If you actually want to show live editable HTML; there's some weird MSIE/Firefox only methods; but there is no 'standard' way..
Hm... it shouldn't be toooo hard to make a way.. Perhaps I'll give it a try next week =P
If it only works in Internet Explorer; it doesn't work.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Input Tag attribute (HTML and CSS)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Got a funny bit of javascript
- Next Thread: how does this work?
