How do I change the input box so it makes a new line after a certain length and also so that it adjusts its size too in react js
<form>
<input
className="form message"
onBlur={handleBlur}
placeholder="MESSAGE"
onChange={handleChange}
name="message"
value={values.message}
/>
</form>
For multiline inputs, you should use texteareas. If you want to dynamically change its height, maybe you could just increment the rows attribute depending on your content length.
You should be using a <textarea>. In practice, <input> fields should only be one line.
You do not need React to modify the height of a textarea. You can do it pretty easily below:
function updateHeight(element) {
element.style.height = "1px";
element.style.height = (element.scrollHeight)+"px";
}
textarea{
width:90%;
margin:auto;
}
<textarea oninput="updateHeight(this)" style="overflow:hidden; height:19px"></textarea>
Related
I am trying to make a Web UI framework and when I deal with input , I have to write the type over and over again with the same style. In that case, I want to put them together to shink the size of the file.
This is my code:
input[class=tUI][type=date],[class=tUI][type=month],[class=tUI][type=week],[class=tUI][type=time] {
background:red;
}
<input type="week" class="tUI">
I want to define the type by just using one Brackets. For example, I want input[class=tUI][type=date || week || month] by just using CSS
How could I get that? Or is it possible?
input.tUI:is([type=date],[type=month],[type=week],[type=time]) {
background:red;
}
<input type="week" class="tUI" />
<input type="date" class="tUI" />
I am trying to make a textarea appear when I click on a button because I don't need it to be displayed by itself in my html page.
I'm using something like:
<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical" ></textarea>
But this is not resolving my problem.
Any idea how I can do that?
I actually have two textarea that display the content of existing files, and when I click on a button to show the content in one text area and then click on the second button to show the content of the second textarea, the first textarea becomes empty while I need to keep both contents in both textareas displayed at the same time! How can I do that too?
If you're using jQuery already, you might do something like this:
<textarea cols="50" rows="20" name="text" id="text_id" class="form-control" style="resize:vertical;display:none"></textarea>
<button class="show_button">Show/hide textarea</button>
<script>$(".show_button").click(function(){$("#text_id").toggle()})</script>
This will toggle the textarea for showing
I'm just assuming you're using jQuery, since form-control is used with Bootstrap - That requires jQuery.
You can use simple javascript or even jquery. But for simple javascript u can do it like this:
On script tag inside head section write:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical' ></textarea>";
}
</script>
On Body section :
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click here</button>
<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical; visibility:hidden'> </textarea>
<button onClick='document.getElementById("text_id").style.visibility = "visible" '> Click me !</button>
This is the most compact way you can do this I can think of:
We are giving the Textarea a CSS property to stay hidden Display = 'none'.
Once the button is clicked, it changes that css property to Display = 'block' to make it visible.
<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical; display = 'none'"></textarea>
<button onclick = "document.getElementById('text_id').style.display = 'block'">
So i am making a php login page. I have the login application finished but all i need are a list of classes that will style my login form the way i want it.
Picture of the login form now - http://i.imgur.com/mrfvXXq.png
I need to style it so it is centered on the screen and will also not take the whole width.
I want it to look like this - http://i.imgur.com/C6G0FGK.png
Now i need it centered on the screen. Note im not adding in the Email input and text box. Only my Username and Password input. All i need is styles.
For a live version please visit gippixservers.com/zAdmin/admindashboard
Code -
">
<div class = "form-group">
<label for="txtUsername" class = "col-lg-2 control-label">Username:</label>
<div class = "col-lg-10">
<input class = "form-control input-block-level" type="text" title="Enter your Username" name="txtUsername" placeholder = "Username" />
</div>
</div>
<div class = "form-group">
<label for="txtPassword" class = "col-lg-2 control-label">Password:</label>
<div class = "col-lg-10">
<input class = "form-control input-block-level" type="password" title="Enter your password" name="txtPassword" placeholder = "Password" />
</div>
</div>
<div class = "form-control">
<input class = "btn btn-primary" type="submit" name="Submit" value = "Login"></input>
</div>
</form>
Bootstrap uses a grid system to place elements:
There are 12 grids you can have on one row. I have used col-*-offset in the code, this will leave space in the beginning. So what I'm basically doing is:
form class="form-horizontal col-md-offset-4 col-md-4" name="form"
method="post" action="/zAdmin/admindashboard.php"
This means, leave grid of 4 length before the form, and set the form to be of grid 4 length thus your form gets centered. [the leftover space on right is 4, all together in total making it 12]
Few changes made near your login button too. Use the class pull-right to position elements to the right side.
Also, remove this:
#gippix-adminControl {
width: 50%;
margin: 0 auto;
}
This is already done with the classes I mentioned above.
Fiddle Demo
I think your asking to make the live version smaller and centered ?
You need to add the following to your form tag. OR wrap your form in a div.
width: 50%; /* or whatever width you see fit */
margin: 0 auto;
Alternatively, You can view all bootstraps predefined form display options - getbootstrap.com/css/#forms
Or on your div <div id="gippix-adminControl" ... inputs... </div>
Just adjust your css to
#gippix-adminControl input{
width: blah;
max-width: blah;
min-width: blah;
}
To move your login button to the right simply set your
<input class="btn btn-primary" type="submit" name="Submit" value="Login">
to float: right; either in your css sheet or inline.
You can put a max-width to your .gippix-adminControl css class and go from there.
.container{max-width: 500px;}
You can also remove the div around your button , that will get rid of the unintended border. Then put a float: right on the button and you'll have yourself a good looking login form !
you can also make a .loginbutton-right css class like this :
.loginbutton-right{float: right;}
and add that class to your button !
It results in this :
Can someone please help me, i have a text area and i have limited the number of characters in it so that the text area fits the content in it without the content overflowing.
Character length works but this doesn't stop the user currently using the space bar to create breaks or excessive spacing, i.e. more than one space. is there a way i can make the text area stop users spacing characters more than once and forbid line breaks?
Sorry if this is a really obvious question but im looking for an answer everywhere and cant find one anywhere.
<form action="includes/change_status.php" id="form2" method="post" name="form2">
<div class="status-border-top"></div>
<div class="status-border">
<textarea data-id="status" id="status" maxlength="80" name="status" style="width: 187px; margin-top:-4px; text-align:left; padding-left:5px; padding-top:3px; padding-bottom:2px; padding-right:3px; margin-left:-4px; height: 54px; font-size:12px; resize: none; border: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position:relative; z-index:100;"><?php echo htmlspecialchars ($profile['status']); ?></textarea>
<input class="status-submit" id="submit" name="submit" src="../PTB1/assets/img/icons/save-status.png" type="image" value="submit">
</div>
</form>
This is how you can remove double spaces or line breaks that the user enters into the textarea.
You'll need to use the latest version of jQuery for this to work.
Working example on jsFiddle.
HTML:
<form action="/" method="post">
<textarea cols="33" rows="12" id="message"></textarea>
</form>
JavaScript:
var $message = $("#message");
$message.on("keydown keypress", function() {
var $this = $(this),
val = $(this).val()
.replace(/(\r\n|\n|\r)/gm," ") // replace line breaks with a space
.replace(/ +(?= )/g,''); // replace extra spaces with a single space
$this.val(val);
});
Another option without jQuery is to compare the currently assigned key to the previous key. If they are the same, and both are in the set of illegal keys, refuse the keypress action. This approach will not change the starting text in any way, no matter what spacing that has.
HTML:
<form action="includes/change_status.php" id="form2" method="post" name="form2">
<div class="status-border-top"></div>
<div class="status-border">
<!-- notice the onkeypress attribute -->
<textarea data-id="status" id="status" maxlength="80" name="status" style="width: 187px; margin-top:-4px; text-align:left; padding-left:5px; padding-top:3px; padding-bottom:2px; padding-right:3px; margin-left:-4px; height: 54px; font-size:12px; resize: none; border: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position:relative; z-index:100;" onkeypress="return ignoreSpaces(event);"><?php echo htmlspecialchars ($profile['status']); ?></textarea>
<input class="status-submit" id="submit" name="submit" src="../PTB1/assets/img/icons/save-status.png" type="image" value="submit">
</div>
</form>
Javascript:
var lastkey;
var ignoreChars = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces(e){
e = e || window.event;
var char = String.fromCharCode(e.charCode);
if(ignoreChars.indexOf(char) >= 0 && ignoreChars.indexOf(lastkey) >= 0){
lastkey = char;
return false;
}else{
lastkey = char;
return true;
}
}
working JFiddle: http://jsfiddle.net/mLYgD/1/
Without client-side scripting, you cannot impose such restrictions.
Since you want to allow at most 80 characters and to disallow line breaks, it would seem to be more adequate to use an input type=text element than a textarea.
Moreover, for input type=text, you can impose restrictions using the HTML5 pattern attribute. Though not supported by old browsers, it works in modern browsers even when client-side scripting has been disabled. You could use code like this:
<input type="text" data-id="status" id="status" maxlength="80" size="80"
name="status" pattern="\s?(\S+\s?)*">
The size attribute specifies the visible width of the field in (average-width) characters. The default font face and font size in an input box depends on the browser, but usually the face is not monospace, unlike in textarea. So if monospace font is desired, set it in CSS.
The value of the pattern attribute has the same syntax as JavaScript regular expressions, except that the match is for the entire input string (so a leading ^ and a trailing $ are implied). The notation \s means any whitespace character (in this context, this means a space in practice), and \S means any non-whitespace character, so the expression allows spaces but not in succession. The leading part \s allows a single leading space; remove it if you don’t want to allow that.
You can use JavaScript to implement the pattern attribute in browsers that do not natively support the attribute but have scripting enabled. Or you can just have JavaScript that uses the same expression (with ^ and $ added).
The contents of <textarea> seems to get cleared once I hide it with display : none and show it back again by removing display. Is there a way to retain the original value when the textarea shows again?
Maybe try using jQuery or some other javascript framework.
In case of jQuery the show and hide function do the magic for you.
<textarea cols="5" rows="5" id="test">Test</textarea>
<input type="button" value="switch on" onclick="$('#test').show();">
<input type="button" value="switch off" onclick="$('#test').hide();">
Well, if you just remove the display, there might be some faults. You have to set it to inline (in case of an inline element) or block (in case of a block element) if you want to make it visible again. The css-Property display can be set to none|inline|block. So if you set the display to none you should set it back to inline instead of removing the property afterwards.
Here is a solution w/o jQuery:
<textarea id="test">TEST</textarea>
<input type="button" value="switch on" onclick="showTest();"/>
<input type="button" value="switch off" onclick="hideTest();"/>
<script type="text/javascript">
function hideTest() {
var field = document.getElementById('test');
field.style.display = 'none';
}
function showTest() {
var field = document.getElementById('test');
field.style.display = 'inline';
}
</script>