I have a HTML code in which the users enter the comment for a particular question if the size of comments are big i want my text box to auto increase in height with the comments
Below is my HTML code:
<label class="label-reports">Comments</label>
<input #((ViewBag.UserId != null && ViewBag.UserId == question.AnsweredBy) || (question.AnsweredBy == null) ? "" : "disabled") type="text" class="form-control" style="align-content:stretch; min-width:1200Px; width: auto !important" for="comments" value="#question.Comments" />
I tried to implement this
<textarea class="form-control" rows="5"></textarea>*
but did not succeed can someone suggest to increase the size of text box with increase in text
For <textarea> Elements...
If you aren't opposed to using a plug-in, you could use something like autosize, which will allow your <textarea> element to grow as expected :
<!-- Example autosize.js CDN Reference -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
// Automatically size all of your <textarea> elements as you type
autosize(document.querySelectorAll('textarea'));
</script>
Interactive Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Autosize Example</title>
</head>
<body>
<pre>Start typing (and press Enter a few times)</pre>
<textarea></textarea>
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
autosize(document.querySelectorAll('textarea'));
</script>
</body>
</html>
For <input> elements...
<input> elements don't have to be left out. There is an aptly-named autosize-input plug-in that essentially accomplishes the same basic thing :
<!-- Example autosize.js CDN Reference -->
<script src="https://rawgit.com/yuanqing/autosize-input/master/autosize-input.min.js"></script>
<script>
// Automatically size all of your <textarea> elements as you type
autosizeInput(document.querySelector('#YourInputID'));
</script>
Related
I am trying to use PyScript in my HTML projects, since I'm more fluent in it than JavaScript. I need to pull input from an input block, but what should work doesn't seem like it does.
When the user presses the submit button, it's supposed to change the words above it to the value of the input box. However, the code only returns "None", as if the value doesn't exist.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PyScript Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- paths:
- /demo.py
</py-env>
</head>
<body style="font-family:Times New Roman;margin-left:40px">
<br>
<p id=main_description class=text>
Hello, world.
</p>
<input class=player_input type=text id=input_box name=input autocomplete=off placeholder="What will you do?">
<button type=button id=submit pys-onclick=submit_input>submit</button>
<py-script src=/demo.py></py-script>
</body>
</html>
PyScript code:
# demo.py
def submit_input(e):
input_box = Element("input_box")
player_input = input_box.select(".value")
main_description = Element("main_description")
main_description.write(player_input)
I have searched for a solution to this everywhere, but it looks like PyScript is still relatively new, so I couldn't find anything except traditional Python solutions. Any advice would be greatly appreciated.
On this line player_input = input_box.select(".value") you are trying to access an element with a class of value but no elements exist inside the input. To retrieve the value of the input you need to access it with the value property like so:
# demo.py
def submit_input(e):
input_box = Element("input_box")
player_input = input_box.value
main_description = Element("main_description")
main_description.write(player_input)
I did create an input HTML field and tried to adjust the column width to 100% through Elementor form to be responsive but it does not work. Any advice, please?
enter image description here
<html lang="en">
<head>
<title>HTML Select Country Phone Code List with Flags</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
<input type="number" id="phone" name="phone" required>
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input, {
separateDialCode: true,
excludeCountries: ["il"],
preferredCountries: ["tr"]
});
</script>
</body>
</html>
You can use this plugin for your solution. You can customize with Elementor as you wish. This plugin is very easy to use
This plugin:
https://wordpress.org/plugins/metform/
I've been searching for a while, and I found that I can send a value from doGet to html created.
But I want to do smth different, I want to have a button and label where where every time I press on that button it increments the label.
something like a counter for pressing that button.
I already has the HTML that renders button and label it's pretty simple
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('stylesheet'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDP Test</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function incrementCounter() {}
</script>
</head>
<body>
<label> Counter 0 </label>
<button onClick="incrementCounter"> Increment counter</button>
</body>
</html>
I want to link the incrementCounter function to this label, or whatever html element that can be done that whenever the button is pressed it gets incremented and rendered on the screen
can someone guide me to go through this ?
You have some errors in your code. Firstly it should be onclick not onClick and the function should be called as onclick="incrementCounter()".
Secondly, a label should be used with a input, textarea or select element.
Now coming to the code
HTML
<p>Count: <span id="counter">0<span></p>
<button onclick="incrementCounter()">Increment Counter</button>
JS
function incrementCounter() {
const counterElem = document.querySelector('#counter'),
count = +counterElem.innerHTML;
counterElem.innerHTML = count+1;
}
What is happening inside the code is I'm selecting the target element where the count would display. Then I'm getting the value of its innerHTML and parsing it as an integer using + before the counterElem.innerHTML. Then I'm adding 1 to the value and setting it as the innerHTML
I have a div that should be displayed as such, but when you click on the div, I need it to transform into an input field.
This is what I have before that div is clicked:
<div>This is the content.</div>
I wan this to become the following when it's clicked:
<input>This is the content.</input>
And to change back when the user clicks elsewhere.
Is such a thing possible with Angular? I looked into using ng-change as a HTML tag, however I couldn't seem to get it going.
Any help is appreciated.
Try this
<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>
and controller has function like
function cntrl($scope){
$scope.showInput = false;
$scope.toggleShowInput = function()
{
$scope.showInput = !$scope.showInput;
}
}
If you use Angular, you should write both element and toggle one for the other when the user click :
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div>
<input ng-show="inputIsOn" type="text">
</body>
</html>
Nope, but the good news is that you don't need that to happen!
In your controller:
$scope.showInput = false;
$scope.myContent = "This is the content";
Back in your HTML file:
<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />
Now when the button is clicked, the input field will display, but the text will not.
I have a dynamic link displayed inside an input tag. How can I make the input tag resize to take the width of the link?
Thanks
You can use a body onload to determine the size....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
window.onload = function() {
thelink = document.getElementById('MyLink');
linksize = thelink.value.length;
if (linksize < 10) thelink.size = 10;
if (linksize > 50) thelink.size = 50;
}
</script>
</head>
<body>
<input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
</body>
</html>
jus tset your minimum and maximum size for maintaining page style....
Perhaps you can create a hidden <span> identically styled, then read its width (because it adjusts to its contents) and assign the width to the <input>.