Jump to content

[SOLVED] Insert character into text field

jandrews3

By jandrews3
in Javascript Help

 Share

Recommended Posts

jandrews3 Regular Member

jandrews3

Posted
Posted

I need some buttons on a page: á, é, í, ó and ú which will insert that character as the next character in whichever field the user is typing. I am a Spanish teacher and my students take vocabulary quizzes which of course have accented letters. I want them to be able to click on a button to insert the letter rather than them having to use those god awful ALT CODES. Is this a Php problem?

Link to comment
Share on other sites
khr2003 Newbie

khr2003

Posted
Posted

This is a javascript issue and not a php. PHP is a server-side language (that means you have to submit something to the server, your page will be refreshed and you get the data), javascript is a client-side script meaning you can perform certain actions and see the results immediately. You may want to add an input button with its value the special characters you have and then apply a javascript code that will do what you requested.

 

I might give you the code if you wanted.

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

No, this is a Javascript problem. The follwoing should help you. One bug I just noticed is that when insterting a character in FF the cursor position is lost after the insertion. I'm too lazy to fix it right now.

 

<html>
<head>
<style> button { width:30px; } </style>
<script type="text/javascript">

function insertAtCursor(fieldID, insertValue)
{
  var fieldObj = document.getElementById(fieldID);

  if (document.selection)
  { //IE support
    fieldObj.focus();
    document.selection.createRange().text = insertValue;
  }
  else if (fieldObj.selectionStart || fieldObj.selectionStart=='0')
  { //MOZILLA/NETSCAPE support

    fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue
                   + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length);
  }
  else
  {
    fieldObj.value += insertValue;
  }
}

</script>
</head>

<body>
<button onclick="insertAtCursor('txtarea1', 'à');">à</button>
<button onclick="insertAtCursor('txtarea1', 'è');">è</button>
<button onclick="insertAtCursor('txtarea1', 'í');">í</button>
<button onclick="insertAtCursor('txtarea1', 'ó');">ó</button>
<button onclick="insertAtCursor('txtarea1', 'ú');">ú</button>
<br /><textarea id="txtarea1" rows="10" cols="40"></textarea>

</body>
</html>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

All I did was find some code with a simple Google search then "improved" it a little. I've updated to maintain the cursor position in FF. I have only done limited testing in IE & FF, but it all appears to work correctly:

 

<html>
<head>
<style> button { width:30px; } </style>
<script type="text/javascript">

function insertAtCursor(fieldID, insertValue)
{
  var fieldObj = document.getElementById(fieldID);

  if (document.selection)
  { //IE support
    fieldObj.focus();
    document.selection.createRange().text = insertValue;
  }
  else if (fieldObj.selectionStart || fieldObj.selectionStart=='0')
  { //MOZILLA/NETSCAPE support
    endPos = fieldObj.selectionStart+1;
    fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue
                   + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length);
    fieldObj.selectionStart = endPos
    fieldObj.selectionEnd = endPos
    fieldObj.focus();
  }
  else
  {
    fieldObj.value += insertValue;
  }
}

</script>
</head>

<body>
<button onclick="insertAtCursor('txtarea1', 'à');">à</button>
<button onclick="insertAtCursor('txtarea1', 'è');">è</button>
<button onclick="insertAtCursor('txtarea1', 'í');">í</button>
<button onclick="insertAtCursor('txtarea1', 'ó');">ó</button>
<button onclick="insertAtCursor('txtarea1', 'ú');">ú</button>
<br /><textarea id="txtarea1" rows="10" cols="40"></textarea>

</body>
</html>

Link to comment
Share on other sites
jandrews3 Regular Member

jandrews3

Posted
  • Author
Posted

This worked WONDERFUL upon testing, however ... I need it to work with <input> fields and it wouldn't seem to. I tried the following code:

<html>
<head>
<style> button { width:30px; } </style>
<script type="text/javascript">

function insertAtCursor(fieldID, insertValue)
{
  var fieldObj = document.getElementById(fieldID);

  if (document.selection)
  { //IE support
    fieldObj.focus();
    document.selection.createRange().text = insertValue;
  }
  else if (fieldObj.selectionStart || fieldObj.selectionStart=='0')
  { //MOZILLA/NETSCAPE support
    endPos = fieldObj.selectionStart+1;
    fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue
                   + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length);
    fieldObj.selectionStart = endPos
    fieldObj.selectionEnd = endPos
    fieldObj.focus();
  }
  else
  {
    fieldObj.value += insertValue;
  }
}

</script>
</head>

<body>
<button onclick="insertAtCursor('setme1', 'á');">á</button>
<button onclick="insertAtCursor('setme1', 'é');">é</button>
<button onclick="insertAtCursor('setme1', 'í');">í</button>
<button onclick="insertAtCursor('setme1', 'ó');">ó</button>
<button onclick="insertAtCursor('setme1', 'ú');">ú</button>
<button onclick="insertAtCursor('setme1', 'ñ');">ñ</button>
<button onclick="insertAtCursor('setme1', 'ü');">ü</button>
<button onclick="insertAtCursor('setme1', '¿');">¿</button>
<button onclick="insertAtCursor('setme1', '¡');">¡</button>
<br>
<button onclick="insertAtCursor('setme1', 'Á');">Á</button>
<button onclick="insertAtCursor('setme1', 'É');">É</button>
<button onclick="insertAtCursor('setme1', 'Í');">Í</button>
<button onclick="insertAtCursor('setme1', 'Ó');">Ó</button>
<button onclick="insertAtCursor('setme1', 'Ú');">Ú</button>
<button onclick="insertAtCursor('setme1', 'Ñ');">Ñ</button>
<button onclick="insertAtCursor('setme1', 'Ü');">Ü</button>
<br />
<input type="text" name="setme1">

</body>
</html>

 

Link to comment
Share on other sites
jandrews3 Regular Member

jandrews3

Posted
  • Author
Posted

I am having another problem, however. When I put this code in a form, the button to put the special characters in the fields work, but then immediately cause the form to SUBMIT.

		<form action="vpractice2.php" method="post" autocomplete="off">
		<?
			$count = 0;
			$max = 49;
			$num = 1;
			print "<input type=\"hidden\" name=\"title\" value=\"".$title."\">";
			while ($count <= $max){
				$fill_it = ${'you' . $count};
				print $new_array[$count]." - ".$num.".<input type=\"text\" name=\"answer".$count."\" id=\"kelp".$count."\" value=\"".$fill_it."\">";
				?>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'á');">á</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'é');">é</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'í');">í</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'ó');">ó</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'ú');">ú</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'ñ');">ñ</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', '¿');">¿</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', '¡');">¡</button>
				<button onclick="insertAtCursor('kelp<?print $count;?>', 'ü');">ü</button>
				<?
				print "<input type=\"hidden\" name=\"new".$count."\" value=\"".$new_array[$count]."\">";
				print "<input type=\"hidden\" name=\"ans".$count."\" value=\"".$new_answer[$count]."\">";
				print "<input type=\"hidden\" name=\"verify\" value=\"".$verify."\">";
				print "<br>";
				$count++;
				$num++;
			}
		?>
		<input type="submit" value="Submit Quiz!">
	</form>

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.