I know this is probably a very beginner question that I just can't seem to find the answer to but anyway.
How do you allow a muli-line HTML edit box to allow tabs to be put into it?(rather than tab going to the next control)
I would prefer to do this without javascript also.
You cannot do this without JavaScript. Here's a sample done with jQuery if you want to go that route.
See here:
<html>
<head>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
}else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
}else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
}else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item,String.fromCharCode(9));
setTimeout("document.getElementById('"+item.id+"').focus();",0);
return false;
}
}
</script>
</head>
<body>
<form>
<textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
<input type="submit" name="submit" value="Submit"/>
</form>
Wild hunch but I think you'd want to have multiple HTML edit boxes on the page, then use javascript (like jQuery) to place them into separate tabs.
The tabs will require some sort of javascript to create the interaction.
(ugh. Disregard. I was thinking visual user interface tabs. Not the tab character.)
<input id="textbox" />
<script language="JavaScript">
<!--
var textbox = document.getElementById("textbox");
if (textbox.addEventListener)
textbox.addEventListener("keydown", this.textbox_keyHandler, false);
else if (textbox.attachEvent)
textbox.attachEvent("onkeydown", this.textbox_keyHandler);
function textbox_keyHandler(e)
{
if (e.keyCode == 9)
{
var textbox = document.getElementById("textbox");
textbox.value += "\t";
if(e.preventDefault) e.preventDefault();
return false;
}
}
// -->
</script>
Related
Am having a tab as below
<div id="tabs" style="width:1060px">
<ul>
<li>Overview</li>
<li>General Info</li>
<li>Dimension</li>
<li>Blocking</li>
<li>History</li>
</ul>
</div>
and the onclick method as below:
function ShowDetails() {
// $("#tabs").tabs("option", "selected", i);
var AccNum = $("#SelId").val();
if (AccNum != null && AccNum != "") {
var url = '/InventJournalGeneral/Details/' + AccNum;
window.open(url, "_self");
}
else {
alert('Choose any one Journal Id');
}
}
Only on double click of the tab am able to see the tab loaded and not on the single click. Also I suppose the tab which i click is not selected and it is always on the tab 0 .
You can try this:
HTML:
<li class="click">General Info</div>
JS:
$(function () {
$('body').on('click', function (evt) {
if($(evt.target).hasClass('click')){
alert("hello");
}
});
});
I have a WebForm in which i need to place around 30 textboxes mainly to enter barcode scanned data. I am making only the first textbox visible and i want the next textbox to be visible only when the previous textbox is filled with some text. I tried using 'If' condition as well in the textbox on selected change but it doesn't work. Any solutions?
You should use java-script for this because if you will use server side function for this then It will go to server so many times by this your application performance also will decrease.
So create a java-script function that will accept one argument. This argument will take next text box id (text box u want to display).
call this javascript function like this:- onkeyup="calgrid(this,"TextBox2");"
pass nexttextbox id in place of TextBox2...
<script type="text/javascript" language="javascript">
function calgrid(firsttextbox,nexttextbox)
{
var id=firsttextbox.id;
var lastindex= id.lastIndexOf("_");
var strclnt=id.slice(0,lastindex+1);
var txtboxvalue=document.getElementById(firsttextbox).value;
if(txtboxvalue!="")
{
document.getElementById(strclnt+nexttextbox).style.visibility='visible';
}
else
{
document.getElementById(strclnt+nexttextbox).style.display = "none";
}
}
</script>
note:- If you will do visible=false from textbox property then we cannt do visible=true from javascript. So Set style for all textbox style="display:none"
You can resolve your problem by Jquery.
I have make a sample code where i have take four Textbox. Initially only first text box is visible in Web form, when user enter some values in first TextBox next Textbox is automatically display if Previous textbox have a value if not next textbox is not visible.
Sample code is given below :
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
$('input:text:not(:eq(0))').hide()
$('input').on("change paste keyup", function () {
if ($(this).val().length > 0) {
$(this).next().show();
}
else
{
$(this).next().hide();
}
});
I have made sample application for same ,please click on given link for Demo
See Demo application
It's at Client side code so its performance is so fast rather than Server Side.
Please vote me if you feel your problem is resolved by my idea.
I'd name these text boxes similarly like "textbox1", "textbox2", "textbox3" so you can easily find the index of current text box. Then you can use KeyDown event to control what will be shown and what not. This is not a working example but it should give you a good direction.
int currentIndex = 1;
private void TextBox1_KeyDown(object sender, KeyEventArgs e)
{
TextBox t = Controls["TextBox" + (currentIndex + 1).ToString()] as TextBox;
t.Visible = true;
currentIndex +=1;
}
Use can use Keydown event in your first textbox
try this code
initially set flag=1 as first textbox is going to be by default visible
private void visibleTextBox(Control c)
{
int flag = 1;
foreach (Control c1 in c.Controls)
{
if (c1.GetType() == typeof(TextBox))
{
if (flag == 1)
{
((TextBox)c1).Visible = true;
}
else
{
((TextBox)c1).Visible = false;
}
if (((TextBox)c1).Text != "")
{
flag = 1;
}
else
{
flag = 0;
}
}
}
}
Comparatively simple solution in JavaScript. The code should be somehow like this.
Define onchange event on text boxes like this:
<asp:TextBox ID="txt1" runat="server" onchange="show('txt1', 'txt2');"></asp:TextBox>
<asp:TextBox ID="txt2" runat="server" onchange="show('txt2', 'txt3');" Style="visibility: hidden;"></asp:TextBox>
Then use this JavaScript code to show the next TextBox conditionally. Put this code in the head tag of the page:
<script type="text/javascript">
function show(txtCurrent, txtNext) {
var valueCurrent = document.getElementById(txtCurrent).value;
//alert(valueCurrent);
if (valueCurrent.length > 0) {
document.getElementById(txtNext).style.visibility = 'visible';
}
else {
document.getElementById(txtNext).style.visibility = 'hidden';
}
}
</script>
I need to make selected text of textbox bold/italic/underline using javascript. For that i am using the following code.
<img src="~/images/Bold" alt="Bold" onclick="changeFont('TextBox1','b');" />
<img src="~/images/Italic" alt="Italic" onclick="changeFont('TextBox1','i');" />
<img src="~/images/Underline" alt="Underline" onclick="changeFont('TextBox1','u');" />
<script type="text/javascript" language="javascript">
function changeFont(txt, change) {
if (change == 'b') {
if (document.getElementById(txt).style.fontWeight == 'bold')
document.getElementById(txt).style.fontWeight = 'normal';
else
document.getElementById(txt).style.fontWeight = 'bold';
}
else if (change == 'i') {
if (document.getElementById(txt).style.fontStyle == 'italic')
document.getElementById(txt).style.fontStyle = 'normal';
else
document.getElementById(txt).style.fontStyle = 'italic';
}
else {
if (document.getElementById(txt).style.textDecoration == 'underline')
document.getElementById(txt).style.textDecoration = 'none';
else
document.getElementById(txt).style.textDecoration = 'underline';
}
}
</script>
But the issue here is, when i click on bold image its making the whole text into bold but not the selected text. It´s not working for the other two images either.
While saving the text of textbox I am unable to get the text including html tags even after trying with
document.getElementById('TextBox1').innerHTML;
I am able to get only the value of textbox.
Is there any way to save and retrieve the same using javascript or C#
Thanks in advance
SC
Here is a question that answers your problem about getting the highlighting text
How to get selected text in textarea?
About making the selected text bold you would need to use html tags or something like bbcode and parse it to html when you print it on to a page.
EDIT: Here is a page that shows the jquery plugin "fieldselection" in action.
EDIT 2: Here is an example of how I would've done this: jsfiddle link
The HTML:
<input id="bold" type="button" value="B" />
<br />
<textarea id="editor"></textarea>
<div id="resultAsHtml"></div>
<br />
<div id="resultAsText"></div>
The javascript (jquery) code:
$(document).ready(function() {
$("#editor").keyup(Update);
function Update(){
var text = $(this).val();
var result = ParseToHtml(text);
$("#resultAsHtml").html(result);
$("#resultAsText").text(result);
}
$("#bold").click(function(){
var range = $("#editor").getSelection();
var textToReplaceWith = "[b]"+ range.text + "[/b]";
$("#editor").replaceSelection(textToReplaceWith , true);
var text = $("#editor").val();
var result = ParseToHtml(text);
$("#resultAsHtml").html(result);
$("#resultAsText").text(result);
});
function ParseToHtml(text) {
text = text.replace("[b]", "<b>");
text = text.replace("[/b]", "</b>");
text = text.replace(" "," ");
text = text.replace("\n","</br>");
return text;
}
$("#bold").replaceSelection("[b]" + $("#editor").getSelection() + "[/b]", true);
});
document.execCommand("bold", false, null);
this is Simplest techinique which worked for me
in all browsers ...
The label is initialized with the value of the textbox. Upon clicking the label, the textbox is shown. The user can then edit the contents of the textbox. Upon blurring focus, the textbox is hidden and the label shown. Should the user delete the contents of the textbox or only enter whitespace into the textbox, the textbox is not hidden, thus avoiding showing a label with no text. Is there a way to do this ?
Untested, but the general idea should help you out.
HTML:
<asp:TextBox ID="txtA" onblur="txtBlur();" style="display:none;" runat="server"/>
<asp:Label ID="txtA" onclick="txtFocus();" runat="server"/>
Client-side JS:
<script>
var txtA = document.getElementById("<%# txtA.ClientID %>");
var lblA = document.getElementById("<%# lblA.ClientID %>");
function txtBlur()
{
if (txtA.value.trim() != '')
{
lblA.innerText = txtA.value;
lblA.style.display = 'inline';
txtA.style.display = 'none';
}
}
function txtFocus()
{
txtA.value = lblA.innerText;
lblA.style.display = 'none';
txtA.style.display = 'inline';
}
</script>
Check for js validation that textbox is not empty
function Validate()
{
if(document.getElementById("txta").value=="")
{
alert('Please enter the value');
document.getElementById("txta").focus();
return false;
}
}
or you can server side
if (txa.text ="")
{
Response.Write('Text box cannot be empty');
}
Is it possible with the wmd editor to add a button to let the user upload an image to the web server and place the corresponding img markdown in the textbox? If not, will another good inplace editor do it? Context: I'm using asp.net mvc, C# and I am a true beginner with javascript.
A brief perusal of the WMD seems to indicate that this feature is not supported directly and that the control is not particularly pluggable.
That being said, there's nothing stopping you from creating a button/upload-field/whatever that sends an image to your servers and injects the appropriate:
<img src="http://your.server.com/path/to/attachments/..." />
Into the control's underlying textarea.
Here's a variation to the minimal example that comes with WMD:
<!DOCTYPE html>
<html>
<head>
<title>WMD minimal example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA/NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)
+ myValue
+ this.value.substring(endPos,
this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
int i = 50;
function Add()
{
$("#myTextarea").insertAtCaret("![alt text][" +(i++)+"]");
// You'll need to add the link too, at the bottom
}
</script>
</head>
<body>
<form>
test
<textarea id="myTextarea" style="width: 500px; height: 200px;">*This* is a minimal example.</textarea>
</form>
<div class="wmd-preview"></div>
<script type="text/javascript" src="wmd/wmd.js"></script>
</body>
</html>
But it's only the beginnings as you can probably tell. This markdown editor looks better
I wrote a blog post that explains how I solved this. In the post, I use PHP - if you're comfortable converting my PHP logic into ASP.NET, you may find it helpful!