I have the following script. After a user clicks submits I want to redirect the user to the same page and populate the drop down and input box with parameter values from the url. Unfortunately they are not populating once the redirect completes. I also need to strip off * from the FilterMultiValue parameter so that the textbox has the orginal value entered?
I've checked the parameter values using an alert function and that works?
<script type="text/javascript">
function getUrlParams() {
var paramMap = {};
if (location.search.length == 0) {
return paramMap;
}
var parts = location.search.substring(1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
function RedirectUrl() {
var tb = document.getElementById("tbSearch").value;
var cs = document.getElementById("sfield").value;
var url = "";
if (tb != "") {
url = "FilterName=" + cs + "&FilterMultiValue=*" + tb + "*";
window.location.href = "mypage.aspx?" + url;
var params = getUrlParams();
alert(params.FilterName);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = params.FilterMultiValue;
}
else {
return false;
}
}
function ClearUrl() {
window.location.href = "mypage.aspx";
document.getElementById("sfield").value = "";
document.getElementById('tbSearch').value = "";
}
</script>
Search Field:
<select id="sfield">
<option selected value="Title" >Title</option>
<option value="Body">Body</option>
</select>
Search Text:
<input type="text" id="tbSearch" />
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Clear" onclick="return ClearUrl();" />
window.location.href = "mypage.aspx?" + url;
reloads the page, which will result in all code after that not beeing executed.
What you want to do is to add code for pageload and check if the parameters are given, then populate the textbox.
Something like:
window.addEventListener('load', function(){
var params = getUrlParams();
if(typeof params.FilterName !== 'undefined'){
// removes the first and the last char from the string
var t = params.FilterMultiValue.substr(1, params.FilterMultiValue.length-2);
document.getElementById("sfield").value = params.FilterName;
document.getElementById('tbSearch').value = t;
}
});
Related
Does anyone know how to add like a link button into a form? For example, a user clicks a + button and they can add an URL. They can add another URL if they wish and remove any links if required. Would be good to have validation for links as well.
I know for validation of the URL I can use "Check if a JavaScript string is a URL", but will need something that will validate all links if multiple have been added.
The best way to explain what I am trying to do is by looking at "Can I insert a hyperlink in my form?" in the form builder.
I just want to add links, and I don't need to display text or anything like that.
Is this what are you looking for?
Your question is a bit unclear.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
let i = 0;
let ii = 0;
function isURL(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(s);
}
function removeLink(id, iid) {
console.log(id);
console.log(iid);
$(id).remove();
$(iid).remove();
return false;
}
function addLink(id) {
var input = prompt("Enter the link", "https://www.example.com");
var valid = isURL(input);
console.log(valid);
if(valid) {
var element = '<br><a id="_' + i + '" href="' + input + '">Link</a>';
console.log(element);
$(id).append(element);
let d = "'#_" + i + "'";
let dd = "'#__" + ii + "'";
let elment = ' <button type="button" id="__' + ii + '" onclick="removeLink(' + d + ', ' + dd + ')">Remove it!</button>';
$(id).append(elment);
console.log(elment);
i = i + 1;
ii = ii + 1;
}
else {
alert("The URL that you have entred is wrong.");
}
return false;
}
</script>
</head>
<body>
<form id="_form" method="POST">
<button type="button" onclick="addLink('#_form')">Add link</button>
</form>
</body>
</html>
Try it here: https://codepen.io/marchmello/pen/ZEGjMyR?editors=1000
What about DOM - not using longer form, so using URL as link text too.
function addUrl(e) {
var f = e.form;
var a = document.createElement("A");
a.href = e.value; // link URL
a.textContent = e.value; // link text
f.appendChild(a);
var x = document.createElement("INPUT");
x.type = "button";
x.value = "X";
x.onclick = remove;
f.appendChild(x);
f.appendChild(document.createElement("BR"));
}
function remove() {
var el = this, // button
parent = el.parentNode, // a must for remove
a = el.previousElementSibling; // anchor
if(el.nextSibling.tagName == 'BR') parent.removeChild(el.nextSibling);
parent.removeChild(el);
parent.removeChild(a);
}
<form>
<input name="url" size="50">
<input type="button" value="Add" onclick="addUrl(this.form.url)"><br>
</form>
I'm newbie in jquery And Data table,
I have problem when to set value for element input from another page using function.
this my 1st page code
{
data: "action_user",
targets: "action_user",
mRender: function (data_app, type_app, row_app) {
if (row_app["id_user"] !== null) {
var va_id_user = row_app["id_user"];
var va_user_name = row_app["user_name"];
var va_gender = row_app["gender"];
var va_address = row_app["address"];
var va_imei = row_app["imei"];
var va_phone = row_app["phone"];
var va_role_name = row_app["role_name"];
var va_email = row_app["email"]; //,supplier_name,supplier_code,address,contact_name,contact_num,status_supp
var va_status_user = row_app["status_user"]; // <a href='#'id='updateDataUser' onclick='javascript:myFunc(" + supplier_id + ")'><i class='fa fa-edit'title='Edit'></i></a>\n\
var data_users = {
id_user: va_id_user,
user_name: va_user_name,
gender: va_gender,
imei: va_imei,
phone:va_phone,
address:va_address,
role_name: va_role_name,
email: va_email,
status_user: va_status_user
};
return"<a id='updateDataUser' href='#' onclick='javascript:editUserFunc(" + JSON.stringify(data_users) + ")'><i class='fa fa-edit activeRecord' rel='13' title='Edit'></i></a>";
// return "<a href='" + data_pict_1 + " 'target='_blank' class='btn btn-info'>" + "<font color='#f2f2f2' size='2em'>" + "Display" + "</font>" + "</a>";
}
}
}
this my html code
<div id="div_add_pic" class="panel panel-default">
<form id="form_add_pic" name="form_add_pic" method="POST" action="">
<div id="form_add_user_response" class="resp"></div>
<div class="box-body">
<div class="form-group">
<label for="username" class="req">User Name :</label>
<input type="text" name="userName" id="userName" placeholder="User Name" class="form-control uppercase" />
</div>
</div>
</form>
</div>
this my function to set input value element .
function editUserFunc(data_users) {
var userName = data_users.user_name;
alert(userName);
$("#userName").val(userName);}
my function I change to
function editUserFunc(data_users) {
var userName = data_users.user_name;
alert(userName);
var oForm = document.getElementById("form_add_pic");
var set_userName = oForm.userName;
window.location.href = "index.jsp?url=user_layout& pages=add_user_form"
}
but I've got error
validation.js:1422 Uncaught TypeError: Cannot read property 'userName' of null
at editUserFunc (validation.js:1422)
at HTMLAnchorElement.onclick (index.jsp?url=user_layout&pages=list_users:1)
my console.log printscreen
how to call the element form on another page
I have tried it many times but I've been unsuccessful. Please help!
I think, you have to move all these functions inside
$(document).ready(function(){
//Replace with your code
})
Because your script may be there in top of html tags and while running these scripts, those html inputs are not loaded.
finally I use this code, to get parameter on url address bar
function getUrlQueryString(param) {
var outObj = {};
var qs = window.location.search;
if (qs != "") {
qs = decodeURIComponent(qs.replace(/\?/, ""));
var paramsArray = qs.split("&");
var length = paramsArray.length;
for (var i=0; i<length; ++i) {
var nameValArray = paramsArray[i].split("=");
nameValArray[0] = nameValArray[0].toLowerCase();
if (outObj[nameValArray[0]]) {
outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
}
else {
if (nameValArray.length > 1) {
outObj[nameValArray[0]] = nameValArray[1];
}
else {
outObj[nameValArray[0]] = true;
}
}
}
}
var retVal = param ? outObj[param.toLowerCase()] : qs;
return retVal ? retVal : ""
}
I try to use two checkboxs with a value = "on". The other one is for rember after submit a form. Every time i click on this checkbox, they will always send "on".
What i do wrong ?
Here is my code
var rdt = {
updateScroll: function() {
alert('klick scroll:' + gbi('scrollit').value);
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id = 'icontent';
ifr.src = gbi('urlinput').value;
ifr.scrolling = (gbi('scrollit').value == 'on') ? 'yes' : 'no';
gbi('scroll_hid').value = (gbi('scrollit').value == 'on') ? 'on' : 'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
}
}
function gbi(iD) {
return document.getElementById(iD);
}
<input type="checkbox" id="scrollit" onclick="rdt.updateScroll()" checked>
<input type="hidden" name="scroll" id="scroll_hid" value="<?php echo $scroll ?>">
The parameter $scroll can predifine over URL, but the result was the same if i use it or if i dont use it.
This is because you are getting its value and its value is on. You have to get the value when it is checked like:
var value = null;
$('#scrollit').click(function(){
if($(this).is('checked'))
{
value = $(this).val();
}
});
In this case you will get its value when it is checked otherwise null
The primary intention of checkbox is to make user that the option to be checked or unchecked it is not intended to send values
You can refer this link for more details
Here is the main thing
The HTML input element allows you to select a
single value for submission in a form (or not).
A solution for your problem is as follows you can check checkbox's current status ie checked or not by using following
based on your code
gbi('scrollit').checked
var rdt = {
updateScroll: function() {
alert('klick scroll:' + gbn('scrollit').value);
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id = 'icontent';
ifr.src = gbi('urlinput').value;
ifr.scrolling = (gbi('scrollit').value == 'on') ? 'yes' : 'no';
gbi('scroll_hid').value = (gbi('scrollit').value == 'on') ? 'on' : 'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
}
}
function gbi(iD) {
return document.getElementById(iD);
}
function gbn(name) {
var x = document.getElementsByName(name);
var i;
var element;
for (i = 0; i < x.length; i++) {
if (x[i].type == "checkbox") {
element = x[i];
}
}
return element;
}
<input type="checkbox" name="scroll" id="scrollit" onclick="rdt.updateScroll()" checked>
<input type="hidden" name="scroll" id="scroll_hid" value="<?php echo $scroll ?>">
add a small loop make the code more clear for me and works already
updateScroll:
function() {
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id='icontent';
ifr.src=gbi('urlinput').value;
if (gbi('scrollit').value=='on' && gbi('scroll_hid').value!='on')
{ ifr.scrolling='yes'; gbi('scroll_hid').value='on';}
else
{ ifr.scrolling='no'; gbi('scroll_hid').value='';}
//ifr.scrolling=(gbi('scrollit').value=='on')?'yes':'no';
//gbi('scroll_hid').value=(gbi('scrollit').value=='on')?'on':'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
},
rotate: function() {
rdt.w = parseInt(gbi('icontent').style.width);
rdt.h = parseInt(gbi('icontent').style.height);
gbi('icontent').style.width=gbi('icontentfoot').style.width = rdt.h+'px';
gbi('icontent').style.height = rdt.w+'px';
}
i found this javascript that allow you to chose an option and once you click the go button. It will redirect you to another site. I have try modify this so i can use it with a button instead of a radio but it doesn't seem to work. Can any 1 help me out ??
Thank you very much.
here the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
//chose which page to go to
function Link() {
if (document.fred.r1[0].checked) {
window.top.location = 'http://kshowonline.com/list';
}
if (document.fred.r1[1].checked) {
window.top.location = 'https://www.google.com/';
}
if (document.fred.r1[2].checked) {
window.top.location = 'https://www.yahoo.com/';
}
if (document.fred.r1[3].checked) {
window.top.location = 'https://nodejs.org/';
}
}
//-->
</script>
</head>
<body onload="f19_GetFormCookie();Link();">
<form title="f19_Include" name="fred">
<INPUT type="radio" name="r1">Baseball
<INPUT type="radio" name="r1">Basketball
<INPUT type="radio" name="r1">Soccer
<INPUT type="radio" name="r1">Fencing
<INPUT type="button" value="GO" onclick="f19_SetFormCookie();Link();">
</form>
<script language="JavaScript" type="text/javascript">
<!--
// A Cookie Script to Store and Retrieve
// the values and states of common form elements
// TEXT BOXES - value
// TEXT AREA - value
// CHECK BOX - checked state
// RADIO BUTTON - checked state
// SELECT LIST - selected Index
// Application Notes and Customising Variables
// Application Notes
// Values and states of each element are stored
// as the page is unloaded or form submitted.
// The storage duration is specified by a customising variable
// Stored values and states of elements included in the cookie
// are re-established as the page is reloaded.
// The number and type of elements included must respect
// the maximum cookie size of 4K.
// The Retrieval is initialised by a <BODY> onload event
// The Storage occurs on a <BODY> onunload event
// e.g.
// <body onload="f19_GetFormCookie();" onunload="f19_SetFormCookie();" >
// To include a form element in the Store and Retrieve
// it must be child nodes of an element with a title of 'f19_Include'
// e.g.
// <span title="f19_Include" >
// <INPUT type="text" size="10" >
// <INPUT type="checkbox >
// </span>
// There may be any number of elements titled 'f19_Include' on a page
// and as many child elements of each 'f19_Include' as required.
// All variable, function etc. names are prefixed with 'f19_'
// to minimise conflicts with other JavaScripts
// Customising Variables
var f19_Days = 1; // The cookie will be available on revisits for a specified number of days
var f19_Cookie = 'My Form2'; // The Cookie name
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f19_Part2 (12-05-2005)
// Functional Code
// No Need To Change ***************************
var f19_TBAry = new Array();
var f19_RCAry = new Array();
var f19_TAAry = new Array();
var f19_SLAry = new Array();
var f19_TBString, f19_RCString, f19_TAString, f19_SLString;
var f19_, f19_exp, f19_st, f19_len, f19_end, f19_st;
var f19_Exp = new Date(new Date().getTime() + f19_Days * 86400000).toGMTString();
function f19_GetFormCookie() {
f19_TBString = f19_GetCookie(f19_Cookie + 'TB');
f19_RCString = f19_GetCookie(f19_Cookie + 'RC');
f19_SLString = f19_GetCookie(f19_Cookie + 'SL');
f19_TAString = f19_GetCookie(f19_Cookie + 'TA');
f19_ = document.getElementsByTagName('*');
for (f19_0 = 0; f19_0 < f19_.length; f19_0++) {
if (f19_[f19_0].title == 'f19_Include') {
f19_Inc = f19_[f19_0].getElementsByTagName('*');
for (f19_1 = 0; f19_1 < f19_Inc.length; f19_1++) {
if (f19_Inc[f19_1].tagName == 'INPUT') {
if (f19_Inc[f19_1].type == 'text') {
f19_TBAry[f19_TBAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].type == 'radio' || f19_Inc[f19_1].type == 'checkbox') {
f19_RCAry[f19_RCAry.length] = f19_Inc[f19_1];
}
}
if (f19_Inc[f19_1].tagName == 'TEXTAREA') {
f19_TAAry[f19_TAAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].tagName == 'SELECT') {
f19_SLAry[f19_SLAry.length] = f19_Inc[f19_1];
}
}
}
}
if (f19_TBString) {
for (f19_1 = 0; f19_1 < f19_TBAry.length; f19_1++) {
f19_TBAry[f19_1].value = f19_TBString.split('~^~')[f19_1];
}
}
if (f19_RCString) {
for (f19_2 = 0; f19_2 < f19_RCAry.length; f19_2++) {
f19_RCAry[f19_2].checked = false;
if (f19_RCString.split('~^~')[f19_2] == 'true') {
f19_RCAry[f19_2].checked = true;
}
}
}
if (f19_TAString) {
for (f19_3 = 0; f19_3 < f19_TAAry.length; f19_3++) {
f19_TAAry[f19_3].value = f19_TAString.split('~^~')[f19_3];
}
}
if (f19_SLString) {
for (f19_4 = 0; f19_4 < f19_SLAry.length; f19_4++) {
f19_SLAry[f19_4].selectedIndex = f19_SLString.split('~^~')[f19_4];
}
}
}
function f19_GetCookie(name) {
var f19_st = document.cookie.indexOf(name + "=");
var f19_len = f19_st + name.length + 1;
if ((!f19_st) && (name != document.cookie.substring(0, name.length))) return null;
if (f19_st == -1) return null;
var f19_end = document.cookie.indexOf(";", f19_len);
if (f19_end == -1) f19_end = document.cookie.length;
return decodeURI(document.cookie.substring(f19_len, f19_end));
}
function f19_SetFormCookie(value) {
f19_TBString = '';
for (f19_0 = 0; f19_0 < f19_TBAry.length; f19_0++) {
f19_TBString += f19_TBAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TB=" + encodeURI(f19_TBString) + ";expires=" + f19_Exp + ";path=/;"
f19_RCString = '';
for (f19_1 = 0; f19_1 < f19_RCAry.length; f19_1++) {
f19_RCString += f19_RCAry[f19_1].checked + '~^~';
}
document.cookie = f19_Cookie + "RC=" + encodeURI(f19_RCString) + ";expires=" + f19_Exp + ";path=/;"
f19_TAString = '';
for (f19_0 = 0; f19_0 < f19_TAAry.length; f19_0++) {
f19_TAString += f19_TAAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TA=" + encodeURI(f19_TAString) + ";expires=" + f19_Exp + ";path=/;"
f19_SLString = '';
for (f19_1 = 0; f19_1 < f19_SLAry.length; f19_1++) {
f19_SLString += f19_SLAry[f19_1].selectedIndex + '~^~';
}
document.cookie = f19_Cookie + "SL=" + encodeURI(f19_SLString) + ";expires=" + f19_Exp + ";path=/;"
}
//-->
</script>
</body>
</html>
You can use onclick event on radio buttons:
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php
You could modify your code to use Buttons instead RadioButtons.
It should resemble the following:
<button name="b1" onclick="f19_SetFormCookie('Baseball')">Baseball</button>
<button name="b2" onclick="f19_SetFormCookie('Basketball')">Basketball</button>
<button name="b3" onclick="f19_SetFormCookie('Soccer')">Soccer</button>
<button name="b4" onclick="f19_SetFormCookie('Fencing')">Fencing</button>
Then you'll have to modify SetFormCookie function to accept the argument - based on which cookie will be set.
please be nice. I'm trying to create a page which sets limit and cut the excess (from the specified limit). Example: Limit is 3. then, I'll input abc if I input d it must say that its limit is reached and the abc will remain. My problem is that it just delete my previous input and make new inputs. Hoping for your great cooperation. Thanks.
<html>
<script type="text/javascript">
function disable_btn_limit(btn_name)
{
/* this function is used to disable and enable buttons and textbox*/
if(btn_name == "btn_limit")
{
document.getElementById("btn_limit").disabled = true;
document.getElementById("ctr_limit_txt").disabled = true;
document.getElementById("btn_edit_limit").disabled = false;
}
if(btn_name == "btn_edit_limit")
{
document.getElementById("btn_limit").disabled = false;
document.getElementById("ctr_limit_txt").disabled = false;
document.getElementById("btn_edit_limit").disabled = true;
}
}
function check_content(txtarea_content)
{
/*This function is used to check the content*/
// initialize an array
var txtArr = new Array();
//array assignment
//.split(delimiter) function of JS is used to separate
//values according to groups; delimiter can be ;,| and etc
txtArr = txtarea_content.split("");
var newcontent = "";
var momo = new Array();
var trimmedcontent = "";
var re = 0;
var etoits;
var etoits2;
//for..in is a looping statement for Arrays in JS. This is similar to foreach in C#
//Syntax: for(index in arr_containter) {}
for(ind_val in txtArr)
{
var bool_check = check_if_Number(txtArr[ind_val])
if(bool_check == true)
{
//DO NOTHING
}
else
{
//trim_content(newcontent);
newcontent += txtArr[ind_val];
momo[ind_val] = txtArr[ind_val];
}
}
var isapa = new Array();
var s;
re = trim_content(newcontent);
for(var x = 0; x < re - 1; x++){
document.getElementById("txtarea_content").value += momo[x];
document.getElementById("txtarea_content").value = "";
}
}
function trim_content(ContentVal)
{
//This function is used to determine length of content
//parseInt(value) is used to change String values to Integer data types.
//Please note that all value coming from diplay are all in String data Type
var limit_char =parseInt(document.getElementById("ctr_limit_txt").value);
var eto;
if(ContentVal.length > (limit_char-1))
{
alert("Length is greater than the value specified above: " +limit_char);
eto = limit_char ;
etoits = document.getElementById("txtarea_content").value;
//document.getElementById("txtarea_content").value = "etoits";
return eto;
//for(var me = 0; me < limit_char; me++)
//{document.getElementById("txtarea_content").value = "";}
}
return 0;
}
function check_if_Number(ContentVal)
{
//This function is used to check if a value is a number or not
//isNaN, case sensitive, JS function used to determine if the values are
//numbers or not. TRUE = not a number, FALSE = number
if(isNaN(ContentVal))
{
return false;
}
else
{ alert("Input characters only!");
return true;
}
}
</script>
<table>
<tr>
<td>
<input type="text" name="ctr_limit_txt" id="ctr_limit_txt"/>
</td>
<td>
<input type="button" name="btn_limit" id="btn_limit" value="Set Limit" onClick="javascript:disable_btn_limit('btn_limit');"/>
</td>
<td>
<input type="button" name="btn_edit_limit" id="btn_edit_limit" value="Edit Limit" disabled="true" onClick="javascript:disable_btn_limit('btn_edit_limit');"/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="txtarea_content" id="txtarea_content" onKeyPress="javascript:check_content(this.value);"></textarea>
<br>
*Please note that you cannot include <br>numbers inside the text area
</td>
</tr>
</html>
Try this. If the condition is satisfied return true, otherwise return false.
<html>
<head>
<script type="text/javascript">
function check_content(){
var text = document.getElementById("txtarea_content").value;
if(text.length >= 3){
alert('Length should not be greater than 3');
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div>
<textarea name="txtarea_content" id="txtarea_content" onkeypress=" return check_content();"></textarea>
</div>
</body>
</html>
Instead of removing the extra character from the text area, you can prevent the character from being written in the first place
function check_content(event) { //PARAMETER is the event NOT the content
txtarea_content = document.getElementById("txtarea_content").value; //Get the content
[...]
re = trim_content(newcontent);
if (re > 0) {
event.preventDefault(); // in case the content exceeds the limit, prevent defaultaction ie write the extra character
}
/*for (var x = 0; x < re - 1; x++) {
document.getElementById("txtarea_content").value += momo[x];
document.getElementById("txtarea_content").value = "";
}*/
}
And in the HTML (parameter is the event):
<textarea ... onKeyPress="javascript:check_content(event);"></textarea>
Try replacing with this:
for(var x = 0; x < re - 6; x++){
document.getElementById("txtarea_content").value += momo[x];
document.getElementById("txtarea_content").value = "";
}
Any reason why the maxlength attribute on a text input wouldn't work for so few characters? In your case, you would have:
<input type="text" maxlength="3" />
or if HTML5, you could still use a textarea:
<textarea maxlength="3"> ...
And then just have a label that indicates a three-character limit on any input.